DateRange Picker

Usage

import { DateRangePicker } from "@govtechmy/myds-react/date-picker";

export default () => <DateRangePicker />;

Examples

Size

Use the size prop to change the checkbox size!

Uncontrolled vs Controlled State

To use the daterange picker in the uncontrolled state, set the defaultValue prop to the initial value of the daterange picker.

To use the daterange picker in the controlled state, set the value prop to the current value of the daterange picker and provide an onValueChange event listener to handle the change.

Disabled

There are many ways to interact with DateRangePicker disabled state. Daterange picker can be disabled entirely by setting the disabled prop to true.

For a finer control on which dates to disable, you can pass a Matcher | Matcher[] that defines the rules for disabling dates.

Maximum and Minimum Year

You can set the maximum and minimum year for the daterange picker by passing the minYear and maxYear props.

Year Sort Order

You can set the sorting order of the years in the year dropdown by passing the yearOrder prop.

Locale

To support different locales, you can pass the locale prop to the daterange picker.

Default value is en. To switch to Bahasa Melayu, pass ms.

Props

DateRangePicker