DateRangePicker

A date range picker widget.

import DateRangePicker as Picker
import Html exposing (Html)


type alias Model =
    { picker : Picker.State }


type Msg
    = PickerChanged Picker.State


init : ( Model, Cmd Msg )
init =
    let
        picker =
            Picker.init Picker.defaultConfig Nothing
    in
    ( { picker = picker }
    , Picker.now PickerChanged picker
    )


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

Configuration

type alias Config =

{ allowFuture : Bool

, applyRangeImmediately : Bool

, class : String

, inputClass : String

, monthFormatter : Month -> String

, noRangeCaption : String

, predefinedRanges : Posix -> List ( String, Range )

, sticky : Bool

, weekdayFormatter : Weekday -> String

, weeksStartOn : Weekday

}

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
weekdayFormatter: How to format a Time.Weekday
weeksStartOn: The Time.Weekday weeks start on (eg. Time.Mon or Time.Sun)

defaultConfig : Config

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
weekdayFormatter: Converts weekday names to their 2 chars English equivalent: Mo, Tu, etc.
weeksStartOn: Time.Mon (weeks start on Monday)

configure : (Config -> Config) -> Config

Helper to selectively alter defaultConfig:

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

State

type State

DateRangePicker state.

Use helpers to set or retrieve values out of it.

init : Config -> Maybe Range -> State

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.

now : (State -> msg) -> State -> Cmd msg

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

nowTask : Config -> Maybe Range -> Task Never State

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

getRange : State -> Maybe Range

Get the current Range from a State, if any.

setRange : Maybe Range -> State -> State

Assign a selected Range to the DateRangePicker.

setToday : Posix -> State -> State

Positions a date range picker State to current date.

disable : Bool -> State -> State

Disable or enable a date range picker State.

isDisabled : State -> Bool

Checks if the date range picker State is currently disabled.

open : Bool -> State -> State

Open or close a date range picker State.

Note: inoperant when the sticky option is True.

isOpened : State -> Bool

Checks if the date range picker State is currently opened.

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

View

view : (State -> msg) -> State -> Html msg

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

Subscriptions

subscriptions : (State -> msg) -> State -> Sub msg

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

allo-media/elm-daterange-picker/2.0.0

DateRangePicker

Configuration

State

View

Subscriptions

Modules