🚧 This website is work in progress 👷
Components
Forms
DatePicker
Draft
DatePicker

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

Import statement

import { DatePicker, DateRangePicker } from "@progressiveui/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

Editable Example

<DatePicker
  labelText="Date Picker"
  datePicker={ReactDatePicker}
/>;

Configuration

You can use onSelect event handler which fires each time some calendar date has been selected.

<DatePicker
  datePicker={ReactDatePicker}
  selected={date}
  onSelect={handleDateSelect} //when day is clicked
  onChange={handleDateChange} //only when value has changed
  onClickOutside={handleDateClickOutside}
/>

It also takes all the properties of the Input component.

DateRangePicker

Editable Example

<DateRangePicker
  labelText="Date Range Picker"
  datePicker={ReactDatePicker}
/>;

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 FormExample = () => {
  const [defaultValues, setDefaultValues] = useState(
    {}
  );
  const {
    control,
    register,
    handleSubmit,
    watch,
    reset,
  } = useForm({ defaultValues });
  const [data, setData] = useState({});

  const setDefaultValuesFunc = (e) => {
    console.log(e.target.value);
    try {
      const values = JSON.parse(e.target.value);
      setDefaultValues(values);
    } catch (e) {
      console.log(e);
    }
  };

  const resetInputs = () => {
    reset(defaultValues);
  };
  const currentValues = watch();

  return (
    <>
      <form
        onSubmit={handleSubmit((data) =>
          setData(data)
        )}
      >
        <Controller
          name="inputname"
          control={control}
          render={({ field }) => (
            <DatePicker
              datePicker={ReactDatePicker}
              {...field}
              selected={field.value}
              datePickerProps={{
                selected: field.value
                  ? new Date(field.value)
                  : Date.now,
                onSelect: (d) => {
                  console.log("ddd", d);
                  field.onChange(d);
                },
              }}
            />
          )}
        />
        <Button type="submit">Submit</Button>{" "}
        <Button onClick={resetInputs} kind="secondary">
          Reset
        </Button>
        <div className="debug">
          <h4>Submitted form data</h4>
          <pre>{JSON.stringify(data, null, 2)}</pre>

          <h4>Current values</h4>
          <pre>
            {JSON.stringify(currentValues, null, 2)}
          </pre>

          <TextInput
            labelText="Default values (editable)"
            defaultValue={JSON.stringify(
              defaultValues
            )}
            onChange={setDefaultValuesFunc}
          />
        </div>
      </form>
    </>
  );
};

render(<FormExample />);
Edit this page

References