[英]Customize Reactive Search DateRange
How would I tackle the implementation of internationalized ReactiveSearch DateRange component? 我将如何处理国际化的ReactiveSearch DateRange组件的实施? I need a custom date format ("dd.mm.yyyy") and translated Names of months.
我需要自定义日期格式(“ dd.mm.yyyy”)和月份的翻译名称。
<ReactiveBase
app="carstore-dataset"
credentials="4HWI27QmA:58c731f7-79ab-4f55-a590-7e15c7e36721">
<DateRange
componentId="DateSensor"
dataField="mtime"
title="DateRange"
defaultValue={{
start: new Date('2019-04-01'),
end: new Date('2019-04-07')
}}
placeholder={{
start: 'Start Date',
end: 'End Date'
}}
focused={true}
numberOfMonths={2}
queryFormat="date"
autoFocusEnd={true}
showClear={true}
showFilter={true}
filterLabel="Date"
URLParams={false}
/>
<div>
Hello ReactiveSearch!
</div>
</ReactiveBase>
Thanks. 谢谢。
Sorry for the delay in responding. 很抱歉延迟回复。
DateRange
internally uses DayPickerInput
from react-day-picker
and Date Component have a prop called dayPickerInputProps
you can directly use it to send props directly to the internal component. DateRange
内部使用来自react-day-picker
DayPickerInput
和Date组件具有一个名为dayPickerInputProps
的道具,您可以直接使用它直接将道具发送到内部组件。
To format the UI Date you will need to use additional package and props. 要格式化UI日期,您将需要使用其他程序包和道具。 You can go over to this page: https://react-day-picker.js.org/docs/input/ and scroll to section called
Change Date Format
to understand better. 您可以转到以下页面: https : //react-day-picker.js.org/docs/input/并滚动到“
Change Date Format
以更好地理解。
Here is a sample code snippet to format the UI: 这是格式化UI的示例代码片段:
Packages Required: 所需包装:
import dateFnsFormat from "date-fns/format";
import dateFnsParse from "date-fns/parse";
import { DateUtils } from "react-day-picker";
Code 码
function parseDate(str, format, locale) {
const parsed = dateFnsParse(str, format, { locale });
if (DateUtils.isDate(parsed)) {
return parsed;
}
return undefined;
}
function formatDate(date, format, locale) {
return dateFnsFormat(date, format, { locale });
}
const FORMAT = "dd/MM/yyyy"; // Your Format
<DateRange
componentId="DateSensor"
dayPickerInputProps={{
formatDate,
format: FORMAT,
parseDate
}}
dataField="date_from"
/>
You can check a working example over here: https://codesandbox.io/s/daterange-9qfvo 您可以在此处查看一个有效的示例: https : //codesandbox.io/s/daterange-9qfvo
Hope this Helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.