Skip to content
A reusable date picker component in Elm 0.19.
Elm JavaScript CSS Shell
Branch: master
Clone or download
Pull request Compare This branch is 57 commits ahead, 1 commit behind elm-community:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Copy and paste cleanup and improve case statement for empty string Oct 14, 2019


This is a fork of the elm-community/elm-datepicker package ported to support elm 0.19.

elm-datepicker is a reusable date picker component in Elm.


This package depends on justinmimbs/date. It uses its date representation: Dates without time and timezones.

Breaking Changes

During the port to 0.19, two breaking changes were made:

  • parseDate now defaults to Date.fromIsoString. Before it was elm-lang/Date.fromString which was much more flexible

  • The --today-css class is now only added to cells that represent todays or the initialized date. Not the picked date. (Bugfix or Breaking change. You may decide)

Upgrading to 3.0.0

3.0.0 introduces a change in emitted html and the packaged css.

The next and previous month buttons previously were a-tags. These interfered with Browser.application apps. Thus, they were changed to button-tags. (see issue #12 for details).

As this change in emitted html needs a change in css, we recommend you to add the following rule to your css when upgrading to 3.0.0:

.elm-datepicker--next { background-color: inherit; }

Upgrading to 4.0.0

4.0.0 introduces one further InputError variant: EmptyString. This is usefull to detect empty inputs especially in cases where the user wants to delete the date. (see issue #26 for details)

Also, the default formatter was changed to match the default parser: The default date format is now "yyyy-MM-dd". (see issue #20 for details)

A huge thanks to John Landis for these contributions.


elm install CurrySoftware/elm-datepicker


The DatePicker.init function initialises the DatePicker. It returns the initialised DatePicker and associated Cmds so it must be done in your program's init or update functions:

Note Make sure you don't throw away the initial Cmd!

init : (Model, Cmd Msg)
        ( datePicker, datePickerCmd ) =
            { model | datePicker = datePicker },
   SetDatePicker datePickerCmd
)        )

The DatePicker can be displayed in a view using the DatePicker.view function. It returns its own message type so you should wrap it in one of your own messages using

type Msg
    = ...
    | SetDatePicker DatePicker.Msg
    | ...

view : Model -> Html Msg
view model =
    div [] [
         |> SetDatePicker

To handle Msg in your update function, you should unwrap the DatePicker.Msg and pass it down to the DatePicker.update function. The DatePicker.update function returns:

  • the new model
  • a DateEvent that represents three things that can possibly happen during an update:
    • None: Nothing
    • Picked Date: The user might pick a date through clicking or typing
    • FailedInput InputError: Or the user typed a date that is either invalid or disabled

In most use cases, it should suffice to match on Picked Date. Have a look at the simple-nightwatch example for basic error handling with InputError.

To create the settings to pass to update, DatePicker.defaultSettings is provided to make it easier to use. You only have to override the settings that you are interested in.

Note The datepicker does not retain an internal idea of a picked date in its model. That is, it depends completely on you for an idea of what date is chosen, so that third tuple member is important! Evan Czaplicki has a compelling argument for why components should not necessarily have an their own state for the primary data they manage here.

someSettings : DatePicker.Settings
someSettings =
    { defaultSettings
        | inputClassList = [ ( "form-control", True ) ]
        , inputId = Just "datepicker"

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of

         SetDatePicker subMsg ->
                ( newDatePicker, dateEvent ) =
                    DatePicker.update someSettings subMsg model.startDatePicker

                date =
                    case dateEvent of
                        Picked newDate ->
                            Just newDate

                        _ ->

                ({ model
                    | date = date
                    , datePicker = newDatePicker
                , Cmd.none)


See the examples folder, or try it on ellie-app: simple example and bootstrap example.


The CSS for the date picker is distributed separately. You can grab the compiled CSS from here or you can grab the SCSS source from here.

Running the acceptance tests


Install the testing tools

run npm install

build the examples

cd examples && make && cd ..

Run the tests


Please file an issue if you have any difficulty running the tests.

You can’t perform that action at this time.