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 Component有一个名为dayPickerInputProps的道具，您可以直接使用它直接将道具发送到内部组件。

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

以下是格式化用户界面的示例代码段：

所需的包裹：

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

希望这会有所帮助！

自定义反应式搜索日期范围

1 个答案: