# Date pickers

MDatePicker is a fully featured date selection component that lets users select a date, or range of dates.

# Usage

Date pickers come in two orientation variations, portrait (default) and landscape. By default they are emitting input event when the day (for date picker) or month (for month picker), but with Reactive prop they can update the model even after clicking year/month.

Sat, Jun 25


# Caveats

# Examples

# Props

# AllowedDates

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

Fri, Mar 2

# 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.


# Events

# Date buttons(TODO)


# DateEvents(TODO)


# Misc

# 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.


# Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.

Edit this page on Github Compontents.Footer.Edit.End
Last updated: 3/28/2022 2:24:25 AM