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
}
{ 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
, weekdayFormatter : Time.Weekday -> String
, weeksStartOn : Time.Weekday
, zone : Time.Zone
}
DateRangePicker configuration:
allowFuture
: Allow picking a range in the futureapplyRangeImmediately
: Apply predefined range immediately when clickedclass
: 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 setpredefinedRanges
: Generates custom predefined ranges.sticky
: Make the picker always openedweekdayFormatter
: 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
)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
reconfigure : (Config -> Config) -> State -> State
Reconfigure a date range picker State
.
state |> reconfigure (\current -> { current | weeksStartOn = Time.Sun })
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 : (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 : (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.