This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
A customisable date picker written in Elm
version 3.0.1
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 3.0.1
Committed At 2018-10-05 14:31:42 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1
elm-community/html-extra 2.2.0 <= v < 3.0.0 2.2.0

Modules

README

Elm DatePicker

A customisable Datepicker written in Elm.

Build Status

Demo/Example: https://elm-datepicker.herokuapp.com/#Styled

demo-screenshot

Usage

Initialise the DatePicker by calling DatePicker.initCalendar. Provide it with a single argument: Single if you just want to be able to select a single date, or Range if you want to select a range.

It's a good idea here to set up a Msg type that you can use to forward DatePicker messages the DatePicker update function.

type alias Model =
    { calendar : DatePicker.DatePicker }


type Msg
    = DatePickerMsg DatePicker.Msg


init : ( Model, Cmd Msg )
init =
    ( { calendar = DatePicker.initCalendar DatePicker.Single }
    , Cmd.map DatePickerMsg DatePicker.receiveDate
    )

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ...
        DatePickerMsg datePickerMsg ->
            { model | calendar = DatePicker.update datePickerMsg model.calendar } ! []

To display the DatePicker, call DatePicker.showCalendar. This takes the initialised datepicker as its first argument, the month you want to display as the second, and a configuration record as the third.

Don't forget, the Html will return a DatePicker.Msg, so you have to map it to the DatePickerMsg Msg we set up above, using Html.map DatePickerMsg.

view : Model -> Html Msg
view model =
  div []
    [ DatePicker.showCalendar model.calendar (DatePicker.getMonth model.calendar) config
        |> Html.map DatePickerMsg
    ]


config : DatePicker.Config
config =
    let
        config =
            DatePicker.defaultConfig
    in
        { config
            | rangeClass = "bg-dark-blue white"
            , rangeHoverClass = "bg-dark-blue moon-gray"
            , selectedClass = "bg-gray white"
            , weekdayFormat = "ddd"
            , validDate = validDate
        }


validDate : Maybe Date -> Maybe Date -> Bool
validDate date currentDate =
    case ( date, currentDate ) of
        ( _, Nothing ) ->
            True

        ( Just date1, Just date2 ) ->
            (Date.toTime date1) > (Date.toTime date2)

        ( Nothing, Just _ ) ->
            False

Examples

To run the examples on your localhost, run the following:

```sh git clone https://github.com/dwyl/elm-datepicker.git && cd elm-datepicker elm-package install -y npm install elm make examples/*.elm --output=examples/example.js elm-reactor ```

Then visit localhost:8000 and open index.html

Alternatively, the examples are hosted on Heroku: https://elm-datepicker.herokuapp.com/#Styled

Simple DatePicker

simple datepicker example

This example shows the basic datepicker implementation, with no additional styling, only the addition of buttons to move to the next/previous month. See code

Styled DatePicker

styled datepicker example

The basic implementation of the datepicker with some custom styling applied. See code

Range DatePicker

range datepicker example

The basic implementation of the datepicker, initialised to select a range instead of a single date. See code

Two Month DatePicker

two month datepicker example

An example showing how to display two months in one datepicker. See code

Dropdown DatePicker

dropdown datepicker example

An example showing how to toggle the visibility of the datepicker, as well as how to use the selected date outside of the datepicker. See code

Tests

First, ensure that you have the dependencies installed:

elm-package install -y
npm install

Then run the elm tests on your localhost, using the following command in your Terminal:

elm-test --verbose

And run the cypress tests with:

./cypress-tests.sh

If you want to see the tests running in the cypress test runner, make sure elm-reactor is running, then run the cypress tests:

./node_modules/.bin/cypress open

HitCount