n1k0 / elm-daterange-picker / DateRangePicker

A date range picker widget.

import Browser
import DateRangePicker as Picker
import Html exposing (Html, text)

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 }, Cmd.none )

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

main =
    Browser.element
        { init = init
        , update = update
        , view = view
        , subscriptions = .picker >> Picker.subscriptions PickerChanged
        }

Configuration


type alias Config =
{ allowFuture : Basics.Bool
, applyRangeImmediately : Basics.Bool
, class : String
, inputClass : String
, monthFormatter : Time.Month -> String
, noRangeCaption : String
, predefinedRanges : Time.Zone -> Time.Posix -> List ( String
, Range )
, sticky : Basics.Bool
, translations : Translations
, weekdayFormatter : Time.Weekday -> String
, weeksStartOn : Time.Weekday
, zone : Time.Zone 
}

DateRangePicker configuration:

defaultConfig : Config

A Config featuring the following default values:

configure : (Config -> Config) -> Config

Helper to selectively alter defaultConfig:

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

reconfigure : (Config -> Config) -> State -> State

Reconfigure a date range picker State.

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

Translations


type alias Translations =
Calendar.Translations

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

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 -> Platform.Cmd.Cmd msg

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

nowTask : Config -> Maybe Range -> Task Basics.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 : Time.Posix -> State -> State

Positions a date range picker State to current date.

disable : Basics.Bool -> State -> State

Disable or enable a date range picker State.

isDisabled : State -> Basics.Bool

Checks if the date range picker State is currently disabled.

open : Basics.Bool -> State -> State

Open or close a date range picker State.

Note: inoperant when the sticky option is True.

isOpened : State -> Basics.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 -> Platform.Sub.Sub msg

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