Native Elm Datepicker
To use the native browser datepicker in Elm all you need to do is add an input tag, capture its input events with
Html.Events.onInput, and parse the value of the input event for a date. The value will be a string containing a date in the ISO 8601 format (YYYY-MM-DD).
Here is very simple Ellie example demonstrating how it works:
The two main shortcomings of using the native browser datepicker vs. the Elm package linked above are:
- Browser support is not universal, although it is pretty good. According to caniuse.com (reference), at the time of writing, the date input type is not supported by IE (though it is by Edge), IE Mobile, Sarafi, or Opera Mini.
- The native browser datepicker is much less stylable, and looks different in each browser. The MDN docs provide some helpful examples of its appearance in different browsers.
If none of these are concerns for you, the native browser datepicker might be the way to go!
Originally published here.