abadi199/datetimepicker 3.0.0

Reusable date and time picker view

Platform: Elm

Language: Elm

License: Apache-2.0

Repository: https://github.com/abadi199/datetimepicker

View on registry: http://package.elm-lang.org/packages/abadi199/datetimepicker/3.0.0

Direct download link: https://github.com/abadi199/datetimepicker/archive/3.0.0.zip

Install: elm-package install abadi199/datetimepicker 3.0.0


Date and Time Picker

Demo

Live Demo

Date Time Picker

The date and time picker can be used in two modes:

  • Analog Time Picker
  • Digital Time Picker

Analog time picker

alt text

Code:

view model =
    DateTimePicker.dateTimePickerWithConfig
        { defaultDateTimeConfig | timePickerType = DateTimePicker.Config.Analog }
        [ class "my-datetimepicker" ]
        model.state
        model.value

Digital time picker

alt text

Code:

view model =
    DateTimePicker.dateTimePickerWithConfig
        { defaultDateTimeConfig | timePickerType = DateTimePicker.Config.Digital }
        [ class "my-datetimepicker" ]
        model.state
        model.value

Date Picker

Just the date picker without the time.

alt text

Code:

type Msg = DateChange DateTimePicker.State (Maybe Date)

type alias Model = { value : Maybe Date, state : DateTimePicker.State }

view model =
    DateTimePicker.datePicker
        DateChange
        [ class "my-datepicker" ]
        model.state
        model.value

Time Picker

Just the date picker without the time.

alt text

Code:

type Msg = TimeChange DateTimePicker.State (Maybe Date)

type alias Model = { value : Maybe Date, state : DateTimePicker.State }

view model =
    DateTimePicker.timePicker
        TimeChange
        [ class "my-timepicker" ]
        model.state
        model.value

Documentation

This package follows the evancz\sortable-table package approach where it's not a nested elm architecture 'component'. It's just view functions where you feed the data and the message constructor to the function. It does use an opaque State to maintain its internal state.

The picker requires the initial value of the date (usually today) to set the initial position of the calendar. To feed this date to the picker's internal state, you can use 2 approach

  • By passing a Date value to the DateTimePicker.initialStateWithToday function when initialing the picker's State.
  • By calling the DateTimePicker.initialCmd as part of your init commands.

Views

The date time picker package provides multiple view functions, depending on how you want to use the picker.

  • datePicker is a simple date picker view, with no time picker, and comes with all default configuration.
  • dateTimePicker is a simple date and time picker view, comes with all default configuration.
  • datePickerWithConfig is a configurable date picker view.
  • dateTimePickerWithConfig is a configurable date and time picker view.

Config

You customize the date picker configuration by passing a DateTimePicker.Config.Config value to the picker's view function. The DateTimePicker.Config module provides some default configurations for both date picker and date time picker.

Internationalization

In order to localize your date format, you need to provide the date time picker with a Date to String formatter and String to Maybe Date parser. The author recommend using rluiten/elm-date-extra for the formatter, and abadi199/dateparser for the parser.

CSS

The CSS for this date time picker can be downloaded from here, or if you're using rtfeldman/elm-css package, you can just include the Stylesheet from DateTimePicker.Css module. Date and Time Picker written entirely in Elm.

Example

Here's a snippet of typical Elm application:

main = 
    Html.program 
        { init = init 
        , view = view
        , update = update
        , subscriptions = subscriptions 
        }

type Msg 
    = DateChange DateTimePicker.State (Maybe Date)

type alias Model = 
    { selectedDate : Maybe Date
    , datePickerState : DateTimePicker.State 
    }

init = 
    ( { selectedDate = Nothing, datePickerState.initialState }
    , DateTimePicker.initialCmd DateChange DateTimePicker.initialState
    )

view model = 
    DateTimePicker.dateTimePickerWithConfig 
        DateChange 
        [ class "my-datetimepicker" ] 
        model.datePickerState 
        model.selectedDate

update msg model =
    case msg of
        DateChange datePickerState selectedDate ->
            ( { model | selectedDate = selectedDate, datePickerState = datePickerState }, Cmd.none ) 

subscriptions =
    ...

For a complete sample code, please see the demo folder of the source code.

Contributing

  • Submit a pull request! If you're missing a feature you want to have, or just found a bug, or found an error in the docs, please submit a pull request.
  • Create an issue! If you found a bug or want a new feature that you think will make the library better, but don't have time to do it yourself, please submit an issue.
  • Message me on slack or twitter if you just want to give me a feedback or thank me. I'm abadi199 on elm-lang slack channel.

Dependencies Requirements Latest Stable Latest Release Licenses
abadi199/dateparser 1.0.0 <= v < 2.0.0 1.0.0 1.0.0 Unknown
elm-community/list-extra 4.0.0 <= v < 5.0.0 6.0.0 6.0.0 MIT
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1 5.1.1 BSD-3-Clause
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0 2.0.0 BSD-3-Clause
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0 2.0.0 BSD-3-Clause
rluiten/elm-date-extra 8.1.2 <= v < 9.0.0 8.3.0 8.3.0 BSD-3-Clause
rtfeldman/elm-css 7.0.0 <= v < 8.0.0 8.1.0 8.1.0 BSD-3-Clause
rtfeldman/elm-css-helpers 2.0.1 <= v < 3.0.0 2.0.1 2.0.1 BSD-3-Clause
Explore the resolved dependency tree for abadi199/datetimepicker 3.0.0

Releases

  • 3.0.0 - March 12, 2017 01:00
  • 2.0.3 - February 05, 2017 01:01
  • 2.0.2 - February 05, 2017 01:01
  • 2.0.1 - January 31, 2017 01:01
  • 2.0.0 - January 30, 2017 01:01
  • 1.0.7 - December 31, 2016 01:00
  • 1.0.6 - December 31, 2016 01:00
  • 1.0.5 - December 31, 2016 01:00
  • 1.0.4 - December 30, 2016 01:01
  • 1.0.3 - December 30, 2016 01:01
See all 13 releases

Project Statistics

SourceRank 9
Dependencies 8
Dependent projects 0
Dependent repositories 0
Total releases 13
Latest release
First release
Stars 18
Forks 1
Watchers 2
Contributors 1
Repo Size: 901 KB

Top Contributors See all

Abadi Kurniawan

Something wrong with this page? Make a suggestion

Export .ABOUT file for this library

Last synced: 2017-03-14 01:02:45 UTC

Login to resync this project