Add a DatePicker.Model to your model.

type alias MyModel =
    { myDatePicker : DatePicker.Model
    }

Init a DatePicker.Model in your model.

myInitialModel : MyModel
myInitialModel =
    { myDatePicker = DatePicker.init
    }

Add a DatePicker.Msg to your Msg.

type MyMsg
    = UpdateMyDatePicker DatePicker.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 ]

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'
        ]

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 your DatePicker.Model.

Reset your DatePicker.Model.

Set the TimeZone

Set the initial Date of your DatePicker.Model.

Change the Date of your DatePicker.Model.

Set the min. date. Dates prior to this can't be selected. Navigation is also capped to this date.

Set the min. date. Dates subsequent to this can't be selected. Navigation is also capped to this date.

Sets whether your date picker should include a time picker.

Set whether your date picker is displayed as an input.

Set whether your datePicker is in error mode (red border).

Set whether your datePicker is locked (disabled).

Set whether your datePicker is clearable (x icon).

Set the default label, for example (-- NOTHING SELECTED --).

Give your datePicker an id. Can be useful for DOM selectors (focus, WebComponents etc.)

Whether your datePicker was changed. Useful if you want to disable save buttons unless there were changes etc.

Whether this datePicker is currently open.

Get the initial Date of your datePicker.

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.

Useful if you need the id of the datePicker in your update function, to set focus etc.