# AllowedDates

You can specify allowed dates using arrays, objects, and functions.

# Colors

Date picker colors can be set using the Color and HeaderColor props. If HeaderColor prop is not provided header will use the Color prop value.

# Elevation

The MDatePicker component supports elevation up to a maximum value of 24. For more information on elevations, visit the official Material Design elevations page.

# Icons

You can override the default icons used in the picker.

# Multiple

Date picker can now select multiple dates with the Multiple prop. If using Multiple then date picker expects its model to be an array.

# Picker date

You can watch the OnPickerDateUpdate which is the displayed month/year (depending on the picker type and active view) to perform some action when it changes. This uses the .sync modifier.

# Range

Date picker can select date range with the Range prop. When using Range prop date picker expects its model to be an array of length 2 or empty.

# Readonly

Selecting new date could be disabled by adding Readonly prop.

# ShowCurrent

By default the current date is displayed using outlined button - ShowCurrent prop allows you to remove the border or select different date to be displayed as the current one.

# ShowAdjacentMonths

By default days from previous and next months are not visible. They can be displayed using the ShowAdjacentMonths prop.

# Width

You can specify the picker’s width or make it full width.

# Date buttons(TODO)

# DateEvents(TODO)

# Active picker

You can create a birthday picker - starting with year picker by default, restricting dates range and closing the picker menu after selecting the day make the perfect birthday picker.

# DialogAndMenu

When integrating a picker into a MTextField, it is recommended to use the Readonly prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title.

Pickers expose a slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.

# Formatting

If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.

# FormattingWithExternalLibraries(TODO)

Formatting dates is possible also with external libs such as Moment.js or date-fns

# Internationalization(TODO)

The date picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale prop, and then set the first day of the week with the first-day-of-week prop.

# Orientation

Date pickers come in two orientation variations, portrait (default) and landscape.