Components
Forms
DatePicker

DatePicker

DatePicker allows the user to select a date or date range from a calendar.

Import statement

import { DatePicker, DateRangePicker } from "@wfp/react"

The DatePicker allows the user to select a date or date range from a calendar.

We recommend react-datepicker for DatePickers and DateRangePickers. It is a well maintained library with a lot of features and customizability and is used in the examples below. It uses date-fns for date manipulation.

Usage

Initialize with loading classes to load the styling from WFP UI.

Make sure to also install react-datepicker and import it in your project.

import ReactDatePicker from "react-datepicker";

DatePicker

It also takes all the properties of the Input component.

Expand code

Editable Example

() => {
  const [date, setDate] = useState(null);

  return (
    <DatePicker
      labelText="DatePicker"
      helperText="This is the helperText"
      datePicker={ReactDatePicker}
      startDate={date}
      setStartDate={(newDate) => setDate(newDate)}
    />
  );
};

DateRangePicker

Expand code

Editable Example

() => {
  const [startdate, setStartDate] = useState(null);
  const [enddate, setEndDate] = useState(null);

  return (
    <DateRangePicker
      labelText="DateRangePicker"
      helperText="This is the helperText"
      datePicker={ReactDatePicker}
      startDate={startdate}
      endDate={enddate}
      setStartDate={(newDate) => setStartDate(newDate)}
      setEndDate={(newDate) => setEndDate(newDate)}
    />
  );
};

Localization

The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:

  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale

Example:

import { registerLocale, setDefaultLocale } from  "react-datepicker";
import es from 'date-fns/locale/es';
registerLocale('es', es)


<DatePicker
  locale="es"
/>

reactHookForm

DatePicker can be used with react-hook-form by using the Controller component.

Expand code

Editable Example

() => {
  const { control, handleSubmit } = useForm();

  return (
    <>
      <form
        onSubmit={handleSubmit((data) =>
          console.log(data)
        )}
      >
        <Controller
          name="ReactDatepicker"
          control={control}
          defaultValue={null}
          render={({ field: { onChange, value } }) => (
            <DatePicker
              labelText="DatePicker"
              helperText="Helper text"
              startDate={value}
              datePicker={ReactDatePicker}
              setStartDate={(date) => onChange(date)}
            />
          )}
        />
      </form>
    </>
  );
};

On this page

References