Unavailable. Nobody can download this version any more, with elm or with the Lamdera compiler: github.com/FloydHamilton/date-picker is gone (deleted or private); Software Heritage has not archived the repo; no fork with tag 1.0.0 found (4 same-name repos checked); no cached copy. Use another version.
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
}A Config featuring the following default values:
allowFuture: TrueapplyRangeImmediately: Trueclass: ""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: Falsetranslations: { 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 NothingReconfigure 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-pickerclear: Button, which will clear input stringapply: Button, which will set new daterangepickStart: Hint at the bottom of calendar, before user pick the first datepickEnd: Hint at the bottom of calendar, after user pick the first dateDateRangePicker state.
Use helpers to set or retrieve values out of it.
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.pickerDateRangePicker subscriptions. They're useful if you want an opened date range picker panel to be closed when clicking outside of it.
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 aTime.MonthnoRangeCaption: The String to render when no range is setpredefinedRanges: Generates custom predefined ranges.sticky: Make the picker always openedtranslations: Allow provide translationsweekdayFormatter: How to format aTime.WeekdayweeksStartOn: TheTime.Weekdayweeks start on (eg.Time.MonorTime.Sun)zone: A userTime.Zoneto compute relative datetimes against (default:Time.utc)