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

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

• Nothing
• The user might pick a date through clicking or typing
• Or the user typed a date that is either invalid or disabled

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.

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

• Invalid String: the typed string cannot be parsed into a date. The error string is given be the parser defined in the settings.
• Disabled Date: a valid date was typed, but it is disabled as defined in the settings.

The DatePicker model. Opaque, hence no field docs.

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 )

Initialize a DatePicker with a given Date

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

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

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

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

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

Expose if the datepicker is open

Expose the currently focused date

The type of date picker 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 ] }

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:

• change the calendar focus

• replace the input text with the new value

• close the picker

  update datepickerSettings (pick someDate) datepicker

Select a range of date to display

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

Select a symmetric range of date to display

DatePicker.init { defaultSettings | changeYear = moreOrLess 10 }

Select a range from a given year to this year

DatePicker.init { defaultSettings | changeYear = from 1995 }

Select a range from this year to a given year

DatePicker.init { defaultSettings | changeYear = to 2020 }

Turn off the date range

DatePicker.init { defaultSettings | changeYear = off }

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.

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.