时间戳

首页 > 解决方案 > 自定义响应式搜索 DateRange

reactjs - 自定义响应式搜索 DateRange

问题描述

我将如何处理国际化 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>

谢谢。

标签： reactjselasticsearchreactivesearch

解决方案

很抱歉延迟回复。DateRange内部使用DayPickerInputfromreact-day-picker和 Date 组件有一个 prop 叫做dayPickerInputProps 你可以直接使用它来将 props 直接发送到内部组件。

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

以下是格式化 UI 的示例代码片段：

所需包裹： 

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

希望这可以帮助！

推荐阅读