Date Picker

Usage

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

export default () => <DatePicker />;

Examples

Size

Use the size prop to change the date picker size!

Uncontrolled vs Controlled State

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

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

Disabled

There are many ways to interact with DatePicker disabled state. Date 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 date 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 common locales, you can pass the locale prop to the date picker.

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

Props

DatePicker