This module is useful if you want to add a DatePicker Form element to your app.
Add a DatePicker.Model to your model.
type alias MyModel =
{ myDatePicker : DatePicker.Model
}
init : Model
Init a DatePicker.Model in your model.
myInitialModel : MyModel
myInitialModel =
{ myDatePicker = DatePicker.init
}
Internal.Msg
Add a DatePicker.Msg to your Msg.
type MyMsg
= UpdateMyDatePicker DatePicker.Msg
update : Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg )
Use in your update function.
myUpdate : Msg -> Model -> ( Model, Cmd Msg )
myUpdate msg model =
case msg of
UpdateMyDatePicker datePickerMsg ->
let
( newDatePicker, cmd ) =
DatePicker.update datePickerMsg mode.myDatePicker
in
{ model | myDatePicker = newDatePicker } ! [ cmd ]
view : Model -> View
Transform an DatePicker.Model into an DatePicker.View, which allows us to pipe View Setters on it.
myView : Model -> Html Msg
myView model =
div
[]
[ DatePicker.view model.myDatePicker -- pipe view setters here, for example |> setIsLocked 'your logic here'
]
render : View -> Html.Styled.Html Msg
Transforms an DatePicker.View into Html DatePicker.Msg
myView : Model -> Html Msg
myView model =
div
[]
[ DatePicker.view model.myDatePicker
|> DatePicker.render
|> Html.map UpdateMyDatePicker
]
reInitialise : Model -> Model
ReInitialise your DatePicker.Model.
reset : Model -> Model
Reset your DatePicker.Model.
setTimeZone : Time.Zone -> Model -> Model
Set the TimeZone
setInitialPosix : Maybe Time.Posix -> Model -> Model
Set the initial Date of your DatePicker.Model.
setSelectedPosix : Maybe Time.Posix -> Model -> Model
Change the Date of your DatePicker.Model.
setMinPosix : Maybe Time.Posix -> View -> View
Set the min. date. Dates prior to this can't be selected. Navigation is also capped to this date.
setMaxPosix : Maybe Time.Posix -> View -> View
Set the min. date. Dates subsequent to this can't be selected. Navigation is also capped to this date.
setIncludeTime : Basics.Bool -> View -> View
Sets whether your date picker should include a time picker.
setIsInput : Basics.Bool -> View -> View
Set whether your date picker is displayed as an input.
setIsError : Basics.Bool -> View -> View
Set whether your datePicker is in error mode (red border).
setIsLocked : Basics.Bool -> View -> View
Set whether your datePicker is locked (disabled).
setIsClearable : Basics.Bool -> View -> View
Set whether your datePicker is clearable (x icon).
setDefaultLabel : String -> View -> View
Set the default label, for example (-- NOTHING SELECTED --).
setId : String -> View -> View
Give your datePicker an id. Can be useful for DOM selectors (focus, WebComponents etc.)
getIsChanged : Model -> Basics.Bool
Whether your datePicker was changed. Useful if you want to disable save buttons unless there were changes etc.
getIsOpen : Model -> Basics.Bool
Whether this datePicker is currently open.
getInitialPosix : Model -> Maybe Time.Posix
Get the initial Date of your datePicker.
getSelectedPosix : Model -> Maybe Time.Posix
Get the current Date of your datePicker. This is what you'd use to display the data somewhere outside of your datePicker, or to send the data to the backend for example etc.
getId : View -> Maybe String
Useful if you need the id of the datePicker in your update function, to set focus etc.