jordymoos/elm-clockpicker

A clock-style timepicker in elm

elm-clockpicker

elm package install JordyMoos/elm-clockpicker

A reusable clock picker component in Elm.

Examples

See the examples folder and the ClockPicker demo.

Run examples

• Run npm install in the root directory
• Goto examples/ and run make there
• Open examples/simple/index.html in your browser

Settings

type alias Settings =
    { hourStep : Int
    , minuteStep : Int
    , startTime : StartTime
    , autoClose : Bool
    , twelveHour : Bool
    , doneText : String
    }

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.

Additional copyright notices

Elm ClockPicker is based on the javascript clockpicker from weareoutman. The css and some of the code is translated from his repository.

The structure of this project is inspired by Bogdanp' elm datepicker. The simple example is also inspired from his elm datepicker.

elm-clockpicker's Issues

Peak the hovered hour

Return time record when time is changed

This will inform the user if there is a new time

Add github pages

Improve the clockpicker for mobile

generalize the css

Now we use twitter bootstrap like css names but those should be more generalized and also namespaced.

the main idea is that the client specifies how the clockpicker looks

Improve github pages

• Add code samples
• Add multiple clock pickers with different settings

Title suggests that hour is the current view while in the minute view

Fix the positioning of the clockpicker

Add examples

be able to specify the time

as a setting.
maybe even configure it as "now"

Update github pages demo

Minute view has inner canvas ring

Improve documentation on package.elm-lang.org

Add AM / PM support

Make it an Elm only module

The case will then to be user defined and thereby won't interfere with there style

Add namespace to the css

Be able to bind to more then 1 clockpicker per page

Be able to configure the hour and minute step size

Be able to swap between the hour and minute view

Add readme

Add runelm.io page

Refactor code

At least remove the duplication of hour and minute

Add tests

we should add tests for the am pm behavior etc

Close when clicking outside of clockpicker