Elm DatePicker

A customisable Datepicker written in Elm.

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

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 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.toRataDie date1 > Date.toRataDie date2

        ( Nothing, Just _ ) ->
            False

Examples

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

git clone https://github.com/dwyl/elm-datepicker.git && cd elm-datepicker
npm install
cd examples
npx elm make *.elm --output=example.js
npx 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

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

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

Range DatePicker

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

Two Month DatePicker

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

Dropdown DatePicker

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:

npm install

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

npx 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