The representation of a date and time in the picker

Construct a DateTime

Date Picker view function with default configuration.

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

type Msg
    = DatePickerChanged DateTimePicker.State (Maybe DateTime.DateTime)


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 DateTime.DateTime }

type Msg
    = DatePickerChanged DateTimePicker.State (Maybe DateTime.DateTime)


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

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

type Msg
    = DatePickerChanged DateTimePicker.State (Maybe DateTime.DateTime)


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 DateTime.DateTime }

type Msg
    = DatePickerChanged DateTimePicker.State (Maybe DateTime.DateTime)


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


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

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

type Msg
    = TimePickerChanged DateTimePicker.State (Maybe DateTime.DateTime)


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 DateTime.DateTime }

type Msg
    = TimePickerChanged DateTimePicker.State (Maybe DateTime.DateTime)


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 with today Date

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