This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
A customisable date picker written in Elm
version 3.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 3.0.0
Committed At 2018-08-24 11:53:24 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1
elm-community/html-extra 2.2.0 <= v < 3.0.0 2.2.0



Elm DatePicker

A customisable Datepicker written in Elm.

Build Status


Initialise the DatePicker by calling DatePicker.initCalendar. Provide it with a single argument: Single if you just want to be able to select a single date, or Range if you want to select a range.

It's a good idea here to set up a Msg type that you can use to forward DatePicker messages the DatePicker update function.

type alias Model =
    { calendar : DatePicker.DatePicker }

type Msg
    = DatePickerMsg DatePicker.Msg

init : ( Model, Cmd Msg )
init =
    ( { calendar = DatePicker.initCalendar DatePicker.Single }
    , DatePickerMsg DatePicker.receiveDate

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        DatePickerMsg datePickerMsg ->
            { model | calendar = DatePicker.update datePickerMsg model.calendar } ! []

To display the DatePicker, call DatePicker.showCalendar. This takes the initialised datepicker as its first argument, the month you want to display as the second, and a configuration record as the third.

Don't forget, the Html will return a DatePicker.Msg, so you have to map it to the DatePickerMsg Msg we set up above, using DatePickerMsg.

view : Model -> Html Msg
view model =
  div []
    [ DatePicker.showCalendar model.calendar (DatePicker.getMonth model.calendar) config
        |> DatePickerMsg

config : DatePicker.Config
config =
        config =
        { config
            | rangeClass = "bg-dark-blue white"
            , rangeHoverClass = "bg-dark-blue moon-gray"
            , selectedClass = "bg-gray white"
            , weekdayFormat = "ddd"
            , validDate = validDate

validDate : Maybe Date -> Maybe Date -> Bool
validDate date currentDate =
    case ( date, currentDate ) of
        ( _, Nothing ) ->

        ( Just date1, Just date2 ) ->
            (Date.toTime date1) > (Date.toTime date2)

        ( Nothing, Just _ ) ->


To run the examples:

  elm make examples/*.elm --output=examples/example.js

Then visit localhost:8000 and open index.html

Alternatively, the examples are hosted on heroku at

Simple DatePicker

simple datepicker example

This example shows the basic datepicker implementation, with no additional styling, only the addition of buttons to move to the next/previous month. See code

Styled DatePicker

styled datepicker example

The basic implementation of the datepicker with some custom styling applied. See code

Range DatePicker

range datepicker example

The basic implementation of the datepicker, initialised to select a range instead of a single date. See code

Two Month DatePicker

two month datepicker example

An example showing how to display two months in one datepicker. See code

Dropdown DatePicker

dropdown datepicker example

An example showing how to toggle the visibility of the datepicker, as well as how to use the selected date outside of the datepicker. See code


First, ensure that you have the dependencies installed:

elm-package install -y
npm install

Then run the elm tests on your localhost, using the following command in your Terminal:

elm-test --verbose

And run the cypress tests with:


If you want to see the tests running in the cypress test runner, make sure elm-reactor is running, then run the cypress tests:

./node_modules/.bin/cypress open