https://github.com/stephenreddek/elm-time-picker

A time picker for Elm
https://github.com/stephenreddek/elm-time-picker

elm hacktoberfest

Last synced: about 3 hours ago
JSON representation

A time picker for Elm

• Host: GitHub
• URL: https://github.com/stephenreddek/elm-time-picker
• Owner: stephenreddek
• License: bsd-3-clause
• Created: 2017-10-27T03:00:35.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T08:30:39.000Z (almost 2 years ago)
• Last Synced: 2023-08-08T20:40:16.088Z (over 1 year ago)
• Topics: elm, hacktoberfest
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/stephenreddek/elm-time-picker/1.0.0
• Size: 263 KB
• Stars: 3
• Watchers: 3
• Forks: 3
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-time-picker

```shell

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.

```elm

    { 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.

```elm

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.

```elm

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

```elm

Html.map TimePickerMsg <| TimePicker.view timePicker

```

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

```elm

time =

    TimePicker.selectedTime model.timePicker

```

## Example

Checkout the [example](https://github.com/stephenreddek/elm-time-picker/tree/master/examples/README "elm-time-picker 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](https://github.com/stephenreddek/elm-time-picker/tree/master/examples/css "elm-time-picker Github"). You can use the styles provided or create your own.