A customizable date picker component.
An opaque type representing messages that are passed inside the DatePicker.
The event resulting from a DatePicker.update
.
Three things can happen:
If you do not care about case error handling for invalid inputs, just matching on Picked
should suffice.
Have a look at the nightwash-simple
example for basic error handling with InputError
.
When typing a date it can go wrong in two ways:
Invalid String
: the typed string cannot be parsed into a date. The error string is given be the parser defined in the settings.Disabled Date
: a valid date was typed, but it is disabled as defined in the settings.The DatePicker model. Opaque, hence no field docs.
init : ( DatePicker, Platform.Cmd.Cmd Msg )
The default initial state of the Datepicker. You must execute the returned command (which, for the curious, sets the current date) for the date picker to behave correctly.
init =
let
( datePicker, datePickerFx ) =
DatePicker.init
in
( { picker = datePicker }, Cmd.map ToDatePicker datePickerfx )
initFromDate : Date -> DatePicker
Initialize a DatePicker with a given Date
init date =
( { picker = DatePicker.initFromDate date }, Cmd.none )
initFromDates : Date -> Maybe Date -> DatePicker
Initialize a DatePicker with a date for today and Maybe a date picked
init today date =
( { picker = DatePicker.initFromDates today date }, Cmd.none )
update : Settings -> Msg -> DatePicker -> ( DatePicker, DateEvent )
The date picker update function. The second tuple member represents a user action to change the date.
view : Maybe Date -> Settings -> DatePicker -> Html Msg
The date picker view. The Date passed is whatever date it should treat as selected.
isOpen : DatePicker -> Basics.Bool
Expose if the datepicker is open
focusedDate : DatePicker -> Maybe Date
Expose the currently focused date
getInitialDate : DatePicker -> Date
Expose the initial date
When you initialize the DatePicker using function init
the resulting Cmd Msg
fetches todays date.
This date is then stored in the DatePicker's model as initial date.
In some scenarios, you want use todays date in combination with DatePicker.Settings
.
This allows you to use todays date without storing it yourself.
Check the simple-with-validate-date
example for an example usage.
{ placeholder : String
, classNamespace : String
, containerClassList : List ( String
, Basics.Bool )
, inputClassList : List ( String
, Basics.Bool )
, inputName : Maybe String
, inputId : Maybe String
, inputAttributes : List (Html.Attribute Msg)
, isDisabled : Date -> Basics.Bool
, parser : String -> Result String Date
, dateFormatter : Date -> String
, dayFormatter : Time.Weekday -> String
, monthFormatter : Date.Month -> String
, yearFormatter : Basics.Int -> String
, cellFormatter : String -> Html Msg
, firstDayOfWeek : Time.Weekday
, changeYear : Date.YearRange
}
The type of date picker settings.
defaultSettings : Settings
A record of default settings for the date picker. Extend this if you want to customize your date picker.
import DatePicker exposing (defaultSettings)
DatePicker.init { defaultSettings | placeholder = "Pick a date" }
To disable certain dates:
import Date exposing (Day(..), dayOfWeek)
import DatePicker exposing (defaultSettings)
DatePicker.init { defaultSettings | isDisabled = \d -> dayOfWeek d `List.member` [ Sat, Sun ] }
pick : Date -> Msg
Generate a message that will act as if the user has chosen a certain date,
so you can call update
on the model yourself.
Note that this is different from just changing the "current chosen" date,
since the picker doesn't actually have internal state for that.
Rather, it will:
change the calendar focus
replace the input text with the new value
close the picker
update datepickerSettings (pick someDate) datepicker
between : Basics.Int -> Basics.Int -> Date.YearRange
Select a range of date to display
DatePicker.init { defaultSettings | changeYear = between 1555 2018 }
moreOrLess : Basics.Int -> Date.YearRange
Select a symmetric range of date to display
DatePicker.init { defaultSettings | changeYear = moreOrLess 10 }
from : Basics.Int -> Date.YearRange
Select a range from a given year to this year
DatePicker.init { defaultSettings | changeYear = from 1995 }
to : Basics.Int -> Date.YearRange
Select a range from this year to a given year
DatePicker.init { defaultSettings | changeYear = to 2020 }
off : Date.YearRange
Turn off the date range
DatePicker.init { defaultSettings | changeYear = off }
open : Msg
Generate a message that will act as if the user has focused on the input element. This will open the datePicker
update datepickerSettings open datepicker
Example usage is demonstrated in the simple-nightwash
-example.
close : Msg
Generate a message that will act as if the user has removed focus from the input element. This will close the datePicker
update datepickerSettings close datepicker
Example usage is demonstrated in simple-nightwash
-example.