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.3
Committed At 2018-08-20 21:15:16 UTC

Modules

    README

    elm-time-picker

    elm package install stephenreddek/elm-time-picker
    

    Usage

    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
            (Just
                { 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 =
        let
            defaultSettings =
                TimePicker.defaultSettings
        in
            { 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 ->
                let
                    ( updatedModel, timeEvent ) =
                        TimePicker.update timePickerSettings msg timePicker
    
                    _ =
                        case timeEvent of
                            NoChange ->
                                Nothing
    
                            Changed time ->
                                Debug.log "The value was changed to " time
                in
                    ( Model updatedModel, Cmd.none )
    

    To render the time picker, call the view function

    Html.map TimePickerMsg <| TimePicker.view timePicker
    

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

    time =
        TimePicker.selectedTime model.timePicker
    

    Example

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

    Css

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