DateRangePicker configuration:

• allowFuture: Allow picking a range in the future
• applyRangeImmediately: Apply predefined range immediately when clicked
• class: CSS class name(s) to add to the component root element.
• inputClass: CSS class name(s) to add to the component text input.
• monthFormatter: How to format a Time.Month
• noRangeCaption: The String to render when no range is set
• predefinedRanges: Generates custom predefined ranges.
• sticky: Make the picker always opened
• translations : Allow provide translations
• weekdayFormatter: How to format a Time.Weekday
• weeksStartOn: The Time.Weekday weeks start on (eg. Time.Mon or Time.Sun)
• zone: A user Time.Zone to compute relative datetimes against (default: Time.utc)

A Config featuring the following default values:

• allowFuture: True
• applyRangeImmediately: True
• class: ""
• inputClass: ""
• monthFormatter: Converts month names to their 3 chars English equivalent: Jan, Feb, etc.
• noRangeCaption: "N/A"
• predefinedRanges: "Today", "Yesterday", "Last 7 days", "Last 30 days", "This month" and "Last month"
• sticky: False
• translations: { close: "Close", clear: "Clear", apply: "Apply", pickStart: "Hint: pick a start date", pickEnd: "Hint: pick an end date" }
• weekdayFormatter: Converts weekday names to their 2 chars English equivalent: Mo, Tu, etc.
• weeksStartOn: Time.Mon (weeks start on Monday)

Helper to selectively alter defaultConfig:

configure (\default -> { default | weeksStartOn = Time.Sun })
    |> init Nothing

Reconfigure a date range picker State.

state |> reconfigure (\current -> { current | weeksStartOn = Time.Sun })

Translations configuration. Basically a record defining the following String attributes:

• close: Button, which will close daterange-picker
• clear: Button, which will clear input string
• apply: Button, which will set new daterange
• pickStart: Hint at the bottom of calendar, before user pick the first date
• pickEnd: Hint at the bottom of calendar, after user pick the first date

DateRangePicker state.

Use helpers to set or retrieve values out of it.

Initializes a State from a Config and an initial Range.

Note: this will position the calendar at Unix Epoch (Jan, 1st 1970 UTC). To position it at today's date, look at now and nowTask.

A command for positioning a State at today's date.

A Task for initializing a State with an initial Range at today's date.

Get the current Range from a State, if any.

Assign a selected Range to the DateRangePicker.

Positions a date range picker State to current date.

Disable or enable a date range picker State.

Checks if the date range picker State is currently disabled.

Open or close a date range picker State.

Note: inoperant when the sticky option is True.

Checks if the date range picker State is currently opened.

Note: always returns True when the sticky config option is enabled.

The main DateRangePicker view.

The first argument is tipycally one of your application Msg, which will receive a new State each time it's changed:

import DateRangePicker as Picker


type alias Model =
    { picker : Picker.State }


type Msg
    = PickerChanged Picker.State


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        PickerChanged state ->
            { model | picker = state }


view : Model -> Html Msg
view model =
    Picker.view PickerChanged model.picker

DateRangePicker subscriptions. They're useful if you want an opened date range picker panel to be closed when clicking outside of it.