Customize Reactive Search DateRange

Question

How would I tackle the implementation of internationalized ReactiveSearch DateRange component? I need a custom date format ("dd.mm.yyyy") and translated Names of months.

<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.

Answer 1

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.

To format the UI Date you will need to use additional package and props. 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.

Here is a sample code snippet to format the 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

Hope this Helps!