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

A sugaring of Maybe to explicitly tell you how to interpret Changed Nothing, because Just Nothing seems somehow wrong. Used to represent a request, by the datepicker, to change the selected date.

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 } ! []

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

init today date =
    { picker = DatePicker.initFromDates today date } ! []

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 (Just 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 }