Date and Time Picker view with default configuration Example: type alias Model = { dateTimePickerState : DateTimePicker.State, value : Maybe DateType }

type Msg
    = DatePickerChanged DateTimePicker.State (Maybe Date)


view =
    DateTimePicker.dateTimePicker
        DatePickerChanged
        [ class "my-datetimepicker" ]
        model.dateTimePickerState
        model.value

Date and Time Picker view with custom configuration Example: type alias Model = { dateTimePickerState : DateTimePicker.State, value : Maybe Date }

type Msg
    = DatePickerChanged DateTimePicker.State (Maybe Date)


customConfig =
    let
        default =
            DateTimePicker.defaultDateTimePickerConfig DatePickerChanged
    in
    { default
        | firstDayOfWeek = Date.Mon
        , autoClose = True
    }


view =
    DateTimePicker.dateTimePickerWithConfig
        customConfig
        [ class "my-datetimepicker" ]
        model.dateTimePickerState
        model.value

Date Picker view function with default configuration.

Example: type alias Model = { datePickerState : DateTimePicker.State, value : Maybe Date }

type Msg
    = DatePickerChanged DateTimePicker.State (Maybe Date)


view =
    DateTimePicker.datePicker
        DatePickerChanged
        [ class "my-datepicker" ]
        model.datePickerState
        model.value

Date Picker view function with custom configuration.

Example: type alias Model = { datePickerState : DateTimePicker.State, value : Maybe Date }

type Msg
    = DatePickerChanged DateTimePicker.State (Maybe Date)


customConfig =
    let
        default =
            DateTimePicker.defaultConfig DatePickerChanged
    in
    { default
        | firstDayOfWeek = Date.Mon
        , autoClose = True
    }


view =
    DateTimePicker.datePickerWithConfig
        customConfig
        DateTimePicker.defaultDatePickerConfig
        [ class "my-datepicker" ]
        model.datePickerState
        model.value

Time Picker view with default configuration Example: type alias Model = { timePickerState : DateTimePicker.State, value : Maybe DateType }

type Msg
    = TimePickerChanged DateTimePicker.State (Maybe Date)


view =
    DateTimePicker.timePicker
        TimePickerChanged
        [ class "my-timepicker" ]
        model.timePickerState
        model.value

Time Picker view with custom configuration Example: type alias Model = { timePickerState : DateTimePicker.State, value : Maybe Date }

type Msg
    = TimePickerChanged DateTimePicker.State (Maybe Date)


customConfig =
    let
        default =
            DateTimePicker.defaultTimePickerConfig TimePickerChanged
    in
    { default
        | autoClose = True
    }


view =
    DateTimePicker.timePickerWithConfig
        customConfig
        [ class "my-datetimepicker" ]
        model.timePickerState
        model.value

Initial state of the DatePicker

Initial state of the DatePicker with today Date

Initial Cmd to set the initial month to be displayed in the datepicker to the current month.

The state of the date time picker (for Internal Use)