自定义响应式搜索 DateRange

Question

我将如何处理国际化 ReactiveSearch DateRange 组件的实现？我需要自定义日期格式（“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>

谢谢。

Answer 1

抱歉延迟回复。 DateRange 内部使用 DayPickerInput 来自 react-day-picker 和 Date 组件有一个名为 dayPickerInputProps 的道具，您可以直接使用它直接将道具发送到内部组件。

要格式化 UI 日期，您需要使用额外的包和道具。您可以转到此页面：https://react-day-picker.js.org/docs/input/ 并滚动到名为 Change Date Format 的部分以更好地了解。

这里是格式化 UI 的示例代码 sn-p：

需要的包：

import dateFnsFormat from "date-fns/format";
import dateFnsParse from "date-fns/parse";
import { DateUtils } from "react-day-picker";

代码

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"
/>

您可以在这里查看一个工作示例：https://codesandbox.io/s/daterange-9qfvo

希望对您有所帮助！