NOTE: all date components expect their value to be an ISO 8601 date string (without the time signature), which follows the format
The kind of date (exact, approximate, memorable) you are requesting from the user will determine which component is best to use.
Use when the user needs to know a date’s relationship to other days or when a date could be variable. It allows the user to view and pick dates from a calendar.
There are three options for the
size, "medium" is the default.
For use in data-dense interfaces you can apply a
weight of "none" to hide the
chrome of the input until the user interacts with it, on hover or focus.
Notice that we're disallowing selection of days prior to today using the
disabledDays property. We're also disabling navigation to months prior to
fromMonth because they would not be selectable.
The range picker functions much like the single picker. It displays two calendar
months and expects a
DateRangePicker accepts the same "size" property as the
DateRangePicker accepts the same "weight" property as the