The pros and cons of using a native browser datepicker in Elm.

When browser support for date input types was worse (or non-existent), JavaScript datepickers were a common solution if you needed to allow a user to enter a date on a form. These days, browser support is much better, making native browser datepickers a much more viable option. If you need a datepicker in Elm, there is a package that will meet your needs (CurrySoftware/elm-datepicker), but it is more cumbersome than the native browser option, which in Elm is pretty easy to use.

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:

  1. 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.
  2. 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!