|elm-version||0.18.0 <= v < 0.19.0|
|Committed At||2016-11-04 04:28:37 UTC|
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.
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
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.
DateSelectorDropdown.viewWithButton function allows you to use your own button with the dropdown. See the docs and the examples listed below for more detail.
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.