DateRangePicker configuration:

• allowFuture: Allow picking a range in the future
• applyRangeImmediately: Apply predefined range immediately when clicked
• weekdayFormatter: How to format a Time.Weekday
• monthFormatter: How to format a Time.Month
• noRangeCaption: The String to render when no range is set
• weeksStartOn: The Time.Weekday weeks start on (eg. Time.Mon or Time.Sun)

Helper for selectively altering defaultConfig:

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

A Config featuring the following default values:

{ allowFuture = True
, applyRangeImmediately = True
, weekdayFormatter = Helpers.weekdayToString
, monthFormatter = Helpers.monthToString
, noRangeCaption = "N/A"
, weeksStartOn = Time.Mon
}

DateRangePicker state.

Use helpers to set or retrieve values out of it.

Initializes a State with the current day represented as a Posix.

import Time


init defaultConfig Nothing (Time.millisToPosix 0)

Initializes a State using a Task for fetching today's date.

import Task


type Msg
  = DateRangePickerCreated State


initToday defaultConfig Nothing
  |> Task.perform DateRangePickerCreated

Get the current DateRangePicker.Range of the DateRangePicker, if any.

Disable or enable a DateRangePicker.

Checks if the DateRangePicker is currently disabled.

Open or close a DateRangePicker.

Checks if the DateRangePicker is currently opened.

Assign a DateRangePicker.Range value to the DateRangePicker.

import DateRangePicker.Range exposing (Range)


state |> setRange (Range begin end)

The main DateRangePicker view.

If you only need the panel content, have a look at panel.

A DateRangePicker panel view.

The panel is the content of the window containing the ranges and the two calendars. This is useful when you don't need to deal with the clickable date input.

Usage is similar to view.

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