Use it like you would Input.text, the attributes, text, placeholder and label will behave exactly like for Input.text. It has however a more complex onChange, a selected date, the internal model and some settings.

Note: Events.onClick, Events.onFocus and Events.onLoseFocus are used internally by the date picker. This means, that your own Events.onClick, Events.onFocus and Events.onLoseFocus attributes have no effect and will not fire.

The initial model of the date picker. Easy to us in your own init function:

(You probably want to get todays date to give it to the date picker using DatePicker.setToday)

init =
    ( { date = Nothing
      , dateText = ""
      , pickerModel = DatePicker.init
      }
    , Task.perform SetToday Date.today
    )

Sets the day that should be marked as today.

Use in your update function:

update msg model =
    case msg of
        ChangePicker changeEvent ->
            case changeEvent of
                DateChanged date ->
                    -- update both date and text
                    ( { model
                        | date = Just date
                        , dateText = Date.toIsoString date
                      }
                    , Cmd.none
                    )


                TextChanged text ->
                    ( { model
                        | date =
                            -- parse the text in any way you like
                            Date.fromIsoString text
                                |> Result.toMaybe
                                |> Maybe.Extra.orElse model.date
                        , dateText = text
                      }
                    , Cmd.none
                    )


                DateCleared ->
                    ( { model
                        | date =
                            Nothing
                        , dateText = ""
                      }
                    , Cmd.none
                    )


                PickerChanged subMsg ->
                    -- internal stuff changed
                    -- call DatePicker.update
                    ( { model
                        | pickerModel =
                            model.pickerModel
                                |> DatePicker.update subMsg
                      }
                    , Cmd.none
                    )

All the possible configuration settings. You probably want to start at the defaultSettings and only change what you need. It's probably easiest to look at the code to see where each attribute list is used for.

Reasonable default settings.

The initial model of the date picker and sets the given date as today.

Closes the date picker.

Example: close date picker on date input:

DateChanged date ->
    ( { model
        | date = Just date
        , dateText = Date.toIsoString date
        , pickerModel =
            model.pickerModel
                |> DatePicker.close
    }
    , Cmd.none
    )

Note: the date picker will reopen on focus and click. To prevent this, close the date picker on every update:

PickerChanged subMsg ->
    ( { model
        | pickerModel =
            model.pickerModel
                |> DatePicker.update subMsg
                --picker will never open
                |> DatePicker.close
        }
    , Cmd.none
    )

Opens the date picker.

Example: start with open picker:

init : ( Model, Cmd Msg )
init =
    ( { date = Nothing
      , dateText = ""
      , pickerModel =
            DatePicker.init
                |> DatePicker.open
      }
    , Task.perform SetToday Date.today
    )

Sets the current visible month of the date picker.

The different selector levels the date picker can show.

Sets the selector level that is visible when date picker is open.

Example: start on the year level:

init : ( Model, Cmd Msg )
init =
    ( { date = Nothing
      , dateText = ""
      , pickerModel =
            DatePicker.init
                |> DatePicker.setSelectorLevel DatePicker.YearsLevel
      }
    , Task.perform SetToday Date.today
    )

Alias of Language from justinmimbs/date.