This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 1.0.4
Committed At 2019-10-25 16:27:25 UTC




    elm package install stephenreddek/elm-time-picker


    The TimePicker.init function creates a time picker. If there's a value provided, it will be used as the default value.

        { noDefaultPicker = TimePicker.init Nothing
        , defaultedPicker = TimePicker.init
                { hours = 17
                , minutes = 30
                , seconds = 0

    Options about how to display the time picker are passed into the view and update function calls. You can create the record one time and reference it in each call or have modified settings for different calls.

    timePickerSettings : TimePicker.Settings
    timePickerSettings =
            defaultSettings =
            { defaultSettings | showSeconds = False, minuteStep = 15, use24Hours = True }

    Handle messages to the picker in your update function. The TimePicker's update function also communicates when the value of the time picker has changed.

    update : Msg -> Model -> ( Model, Cmd Msg )
    update msg { timePicker } =
        case msg of
            TimePickerMsg msg ->
                    ( updatedModel, timeEvent ) =
                        TimePicker.update timePickerSettings msg timePicker
                    _ =
                        case timeEvent of
                            NoChange ->
                            Changed time ->
                                Debug.log "The value was changed to " time
                    ( Model updatedModel, Cmd.none )

    To render the time picker, call the view function TimePickerMsg <| TimePicker.view timePicker

    Access the selected time at any time by using the selectedTime function.

    time =
        TimePicker.selectedTime model.timePicker


    Checkout the example to test it or see an example of how to wire it up.


    An example style for the time picker can be found in the project repo. You can use the styles provided or create your own.