UI.DatePicker

The UI.DatePicker is a component that displays a calendar for the user to pick a date.

    DatePicker.singleDatePicker
        { toExternalMsg = Msg.ToDatePicker
        , onSelectMsg = Msg.SelectDate
        }
        model.datePickerModel
        model.maybeSelectedDate
        |> DatePicker.withTodaysMark appConfig.timeNow
        |> DatePicker.renderElement appConfig.renderConfig

Building

type DatePicker msg

The DatePicker msg type is used for describing the component for later rendering.

singleDatePicker :

{ toExternalMsg : Msg -> msg

, onSelectMsg : Date -> msg

}

-> Model

-> Maybe Date

-> DatePicker msg

Allows picking a single date

singleDatePicker
    { toExternalMsg = Msg.ToDatePicker
    , onSelectMsg = Msg.SelectDate
    }
    model.datePickerModel
    model.maybeSelectedDate

Options

withTodaysMark : Date -> DatePicker msg -> DatePicker msg

Mark today's day with a single blue dot below it.

withRangeLimits : Maybe Date -> Maybe Date -> DatePicker msg -> DatePicker msg

Limits the days that can be selected to a specific range.

NOTE: This function does not validate/change the current viewing month or selected date.

Rendering

renderElement : RenderConfig -> DatePicker msg -> Element msg

Show the datapicker.

Model management

type Model

The Model holding current viewing month and year.

init : Date -> Model

Creates the starting Model. It receives an initial date for focusing its month and year.

NOTE: This does not selects the said date, just start by displaying its month.

type Msg

Contains a pre-defined datapicker's change.

update : Msg -> Model -> ( Model, Effects msg )

The update function.

PaackEng/paack-ui/7.19.3

UI.DatePicker

Building

Options

Rendering

Model management

Modules