The DateSelector view displays a familiar calendar for selecting a date, but allows a user to select the year, month, and day independently. This allows for quick selection of a date without changing modes or stepping through calendars one month at a time.
The core view is provided in the DateSelector module, and a dropdown view is available in DateSelectorDropdown. Both modules expose only view functions. Because there is little data to manage, how you store and update the data is up to you.
The DateSelector.view function takes only Date values (for the minimum, maximum, and selected dates; a side-effect of the UI design is that no "internal" state is needed) and creates Html that produces Date messages. You can map its Date messages to your own message type.
type Msg = SelectDate Date | ...
view : Html Msg
view =
DateSelector.view minDate maxDate (Just selectedDate)
|> Html.map SelectDate
The DateSelectorDropdown.view function creates a button and a DateSelector view when it's open. You must provide a Bool indicating whether or not the dropdown is open, as well as constructors for the messages you want to receive when a user toggles the dropdown and when they select a date.
The DateSelectorDropdown.viewWithButton function allows you to use your own button with the dropdown. See the docs and the examples listed below for more detail.
- Standalone DateSelector / source
- DateSelectorDropdown / source
- DateSelectorDropdown with custom button / source
- Multiple DateSelectorDropdowns / source
The styles are available as a CSS file here. This file does not declare a font-family, and all sizes are specified in em units, allowing font styles to be inherited. Similarly, the default button for DateSelectorDropdown.view is an unstyled <input>, allowing its look to be inherited.