You will first need to add the DatePickerMsg to the type consumed by your update function so it recognizes this type.

import DatePicker exposing (DatePickerMsg, DatePickerMsg(..))
...
type Msg
    = FireZeMissiles
    |  DatePickerMsg

datePickerInit returns an initialized DatePickerModel. Do not throw out the returned command! The command is used to get today's current date which the date picker uses as the default for display. The string passed as the first argument must be a unique id for the datepicker

import DatePicker exposing (datePickerInit)


init : (Model, Cmd Msg)
init =
    let
        (datePickerData, datePickerInitCmd) =
            datePickerInit "my-datepicker-id"
    in
        ({ datePickerData = datePickerData
         , selectedDate = Nothing
         }
        , Cmd.map HandleDatePickerMsg datePickerInitCmd
        )

datePickerUpdate consumes the message you've mapped and a DatePickerModel to output ( DatePickerModel, Cmd DatePickerMsg). You will need to alter your update function to handle any DatePickerMsg that flows through.

import DatePicker exposing
    ( datePickerUpdate
    , DatePickerMsg(SelectDate)
    )
...
handleDatePickerMsg model datePickerMsg =
    let
        (datePickerData, datePickerCmd) =
            datePickerUpdate datePickerMsg model.datePickerData
    in
        ({ model
         | datePickerData = datePickerData
         }
        , Cmd.map HandleDatePickerMsg datePickerCmd
        )
...
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )


        HandleDatePickerMsg datePickerMsg ->
            handleDatePickerMsg model datePickerMsg

The DatePickerModel type needs to be added to any data structure that requires a picker instance

import DatePicker exposing (DatePickerModel)
...
type alias Model =
    { datePickerData : DatePickerModel
    }
}

This is mostly an opaque type you don't have to worry about, though there are some important fields you will want to use:

• today is the default "selected" day of the picker before the user has actually clicked to "select" a day. This is needed so the head display isn't empty before the user has selected anything, without forcing there be a default selected date of "today".
• indexDate is a date used to track which month the calendar is currently showing. Do not set this directly. Use the setIndexDate helper
• selectedDate is the last date the user clicked on in the calendar that was selectable
• selectionMode determines whether the user sees the Calendar or the YearPicker

The main view for the datepicker. Use Html.map so the returned type doesn't conflict with your view's type.

import DatePicker exposing
    ( datePickerView
    , datePickerDefaultProps
    )
...
view : Model -> Html Msg
view model =
    datePickerView
        model.datePickerData
        datePickerDefaultProps
        |> Html.map OnDatePickerMsg

The second argument passed to datePickerView. These are configuration properties that generally determine the range of selectable dates

Use the default props if you don't want to support any sort of configuration. These mostly center around limiting the user to a specific selection range of dates. By default, nothing is restricted.

datePickerDefaultProps =
    { canSelectYear = \year -> True
    , canSelectMonth = \year month -> True
    , canSelectDate = \date -> True
    , hideFooter = False
    }

Takes an instance of DatePickerModel and returns a new one with the given index date. It is important to not just set indexDate directly as this will not refresh the data to completely reflect this

Represents the current mode the picker is set to

type SelectionMode
    = Calendar
    | YearPicker