agustinrhcp / elm-datepicker / DatePicker

A customizable date picker component.

Tea ☕


type Msg

An opaque type representing messages that are passed inside the DatePicker.


type DateEvent
    = None
    | FailedInput InputError
    | Picked Date

The event resulting from a DatePicker.update. Three things can happen:

If you do not care about case error handling for invalid inputs, just matching on Picked should suffice.

Have a look at the nightwash-simple example for basic error handling with InputError.


type InputError
    = Invalid String
    | EmptyString
    | Disabled Date

When typing a date it can go wrong in two ways:


type DatePicker

The DatePicker model. Opaque, hence no field docs.

init : ( DatePicker, Platform.Cmd.Cmd Msg )

The default initial state of the Datepicker. You must execute the returned command (which, for the curious, sets the current date) for the date picker to behave correctly.

init =
    let
        ( datePicker, datePickerFx ) =
            DatePicker.init
    in
    ( { picker = datePicker }, Cmd.map ToDatePicker datePickerfx )

initFromDate : Date -> DatePicker

Initialize a DatePicker with a given Date

init date =
    ( { picker = DatePicker.initFromDate date }, Cmd.none )

initFromDates : Date -> Maybe Date -> DatePicker

Initialize a DatePicker with a date for today and Maybe a date picked

init today date =
    ( { picker = DatePicker.initFromDates today date }, Cmd.none )

update : Settings -> Msg -> DatePicker -> ( DatePicker, DateEvent )

The date picker update function. The second tuple member represents a user action to change the date.

view : Maybe Date -> Settings -> DatePicker -> Html Msg

The date picker view. The Date passed is whatever date it should treat as selected.

isOpen : DatePicker -> Basics.Bool

Expose if the datepicker is open

focusedDate : DatePicker -> Maybe Date

Expose the currently focused date

getInitialDate : DatePicker -> Date

Expose the initial date

When you initialize the DatePicker using function init the resulting Cmd Msg fetches todays date. This date is then stored in the DatePicker's model as initial date.

In some scenarios, you want use todays date in combination with DatePicker.Settings. This allows you to use todays date without storing it yourself.

Check the simple-with-validate-date example for an example usage.

Settings


type alias Settings =
{ placeholder : String
, classNamespace : String
, containerClassList : List ( String
, Basics.Bool )
, inputClassList : List ( String
, Basics.Bool )
, inputName : Maybe String
, inputId : Maybe String
, inputAttributes : List (Html.Attribute Msg)
, isDisabled : Date -> Basics.Bool
, parser : String -> Result String Date
, dateFormatter : Date -> String
, dayFormatter : Time.Weekday -> String
, monthFormatter : Time.Month -> String
, yearFormatter : Basics.Int -> String
, cellFormatter : String -> Html Msg
, firstDayOfWeek : Time.Weekday
, changeYear : Date.YearRange 
}

The type of date picker settings.

defaultSettings : Settings

A record of default settings for the date picker. Extend this if you want to customize your date picker.

import DatePicker exposing (defaultSettings)

DatePicker.init { defaultSettings | placeholder = "Pick a date" }

To disable certain dates:

import Date exposing (Day(..), dayOfWeek)
import DatePicker exposing (defaultSettings)

DatePicker.init { defaultSettings | isDisabled = \d -> dayOfWeek d `List.member` [ Sat, Sun ] }

pick : Date -> Msg

Generate a message that will act as if the user has chosen a certain date, so you can call update on the model yourself. Note that this is different from just changing the "current chosen" date, since the picker doesn't actually have internal state for that. Rather, it will:

between : Basics.Int -> Basics.Int -> Date.YearRange

Select a range of date to display

DatePicker.init { defaultSettings | changeYear = between 1555 2018 }

moreOrLess : Basics.Int -> Date.YearRange

Select a symmetric range of date to display

DatePicker.init { defaultSettings | changeYear = moreOrLess 10 }

from : Basics.Int -> Date.YearRange

Select a range from a given year to this year

DatePicker.init { defaultSettings | changeYear = from 1995 }

to : Basics.Int -> Date.YearRange

Select a range from this year to a given year

DatePicker.init { defaultSettings | changeYear = to 2020 }

off : Date.YearRange

Turn off the date range

DatePicker.init { defaultSettings | changeYear = off }

open : Msg

Generate a message that will act as if the user has focused on the input element. This will open the datePicker

update datepickerSettings open datepicker

Example usage is demonstrated in the simple-nightwash-example.

close : Msg

Generate a message that will act as if the user has removed focus from the input element. This will close the datePicker

update datepickerSettings close datepicker

Example usage is demonstrated in simple-nightwash-example.