This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Reusable date and time picker view
version 6.0.1
license Apache 2.0
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 6.0.1
Committed At 2018-04-27 15:04:47 UTC
rluiten/elm-date-extra 8.1.2 <= v < 10.0.0 9.4.0
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1
elm-community/list-extra 4.0.0 <= v < 8.0.0 7.1.0
abadi199/dateparser 1.0.0 <= v < 2.0.0 1.0.4


Date and Time Picker


Live Demo

Date Time Picker

The date and time picker can be used in two modes:

  • Analog Time Picker
  • Digital Time Picker

Analog time picker

alt text


view model =
        { defaultDateTimeConfig | timePickerType = DateTimePicker.Config.Analog }
        [ class "my-datetimepicker" ]

Digital time picker

alt text


view model =
        { defaultDateTimeConfig | timePickerType = DateTimePicker.Config.Digital }
        [ class "my-datetimepicker" ]

Date Picker

Just the date picker without the time.

alt text


type Msg = DateChange DateTimePicker.State (Maybe Date)

type alias Model = { value : Maybe Date, state : DateTimePicker.State }

view model =
        [ class "my-datepicker" ]

Time Picker

Just the time picker without the date.

alt text


type Msg = TimeChange DateTimePicker.State (Maybe Date)

type alias Model = { value : Maybe Date, state : DateTimePicker.State }

view model =
        [ class "my-timepicker" ]


This package follows the evancz\sortable-table package approach where it's not a nested elm architecture 'component'. It's just view functions where you feed the data and the message constructor to the function. It does use an opaque State to maintain its internal state.

The picker requires the initial value of the date (usually today) to set the initial position of the calendar. To feed this date to the picker's internal state, you can use 2 approaches

  • By passing a Date value to the DateTimePicker.initialStateWithToday function when initialing the picker's State.
  • By calling the DateTimePicker.initialCmd as part of your init commands.


The date time picker package provides multiple view functions, depending on how you want to use the picker.

  • datePicker is a simple date picker view, with no time picker, and comes with all default configuration.
  • timePicker is a simple time picker view, with no date picker, and comes with all default configuration.
  • dateTimePicker is a simple date and time picker view, comes with all default configuration.
  • datePickerWithConfig is a configurable date picker view.
  • timePickerWithConfig is a configurable time picker view.
  • dateTimePickerWithConfig is a configurable date and time picker view.


You customize the date picker configuration by passing a DateTimePicker.Config.Config value to the picker's view function. The DateTimePicker.Config module provides some default configurations for both date picker and date time picker.


In order to localize your date format, you need to provide the date time picker with a Date to String formatter and String to Maybe Date parser. The author recommends using rluiten/elm-date-extra for the formatter, and abadi199/dateparser for the parser.


The rtfeldman/elm-css code for this package is available as separate package as abadi199/datetimepicker-css, that way, you can still use package without having to have dependency to elm-css or if your project is using different version of elm-css. Just the download compiled styles.css in include it in your html. If you're using elm-css in your project, and you want to bundle the DateTimePicker's css along with our project css, please refer to abadi199/datetimepicker-css


Here's a snippet of typical Elm application:

main =
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions

type Msg
    = DateChange DateTimePicker.State (Maybe Date)

type alias Model =
    { selectedDate : Maybe Date
    , datePickerState : DateTimePicker.State

init =
    ( { selectedDate = Nothing, datePickerState = DateTimePicker.initialState }
    , DateTimePicker.initialCmd DateChange DateTimePicker.initialState

view model =
        [ class "my-datetimepicker" ]

update msg model =
    case msg of
        DateChange datePickerState selectedDate ->
            ( { model | selectedDate = selectedDate, datePickerState = datePickerState }, Cmd.none )

subscriptions =

For a complete sample code, please see the demo folder of the source code.


  • Submit a pull request! If you're missing a feature you want to have, or just found a bug, or found an error in the docs, please submit a pull request.
  • Create an issue! If you found a bug or want a new feature that you think will make the library better, but don't have time to do it yourself, please submit an issue.
  • Message me on slack or twitter if you just want to give me a feedback or thank me. I'm abadi199 on elm-lang slack channel.