https://github.com/jordymoos/elm-clockpicker

A clock-style timepicker in elm
https://github.com/jordymoos/elm-clockpicker

clock-picker clockpicker elm elm-clockpicker timepicker

Last synced: about 2 months ago
JSON representation

A clock-style timepicker in elm

• Host: GitHub
• URL: https://github.com/jordymoos/elm-clockpicker
• Owner: JordyMoos
• License: bsd-3-clause
• Created: 2016-11-10T23:05:59.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-23T19:51:20.000Z (about 6 years ago)
• Last Synced: 2023-08-08T20:39:28.001Z (over 1 year ago)
• Topics: clock-picker, clockpicker, elm, elm-clockpicker, timepicker
• Language: Elm
• Homepage: https://jordymoos.github.io/elm-clockpicker/
• Size: 140 KB
• Stars: 8
• Watchers: 3
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-clockpicker

``` shell

elm package install JordyMoos/elm-clockpicker

```

A reusable clock picker component in Elm.

## Examples

See the [examples][examples] folder and [the ClockPicker demo][demo].

[examples]: https://github.com/JordyMoos/elm-clockpicker/tree/master/examples

[demo]: https://jordymoos.github.io/elm-clockpicker/

## Run examples

- Run `npm install` in the root directory

- Goto `examples/` and run `make` there

- Open `examples/simple/index.html` in your browser

## Settings

```elm

type alias Settings =

    { hourStep : Int

    , minuteStep : Int

    , startTime : StartTime

    , autoClose : Bool

    , twelveHour : Bool

    , doneText : String

    }

```

```elm

import ClockPicker exposing (defaultSettings, StartTime(..))

ClockPicker.init { defaultSettings | minuteStep = 5 }

```

See [ClockPicker.Settings][settings] for detailed information

[settings]: http://package.elm-lang.org/packages/JordyMoos/elm-clockpicker/latest/ClockPicker#settings

## CSS

The CSS for the clock picker is distributed separately. You can grab

the compiled CSS from [here][compiled].

[compiled]: https://github.com/JordyMoos/elm-clockpicker/blob/master/css/elm-clockpicker.css

## Additional copyright notices

Elm ClockPicker is based on the javascript clockpicker from  [weareoutman][weareoutman].

The css and some of the code is translated from his repository.

The structure of this project is inspired by [Bogdanp' elm datepicker][Bogdanp].

The simple example is also inspired from his elm datepicker.

[weareoutman]: https://github.com/weareoutman/clockpicker

[Bogdanp]: https://github.com/Bogdanp/elm-datepicker