PaackEng / paack-ui / 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 : Calendar.Date -> msg } -> Model -> Maybe Calendar.Date -> DatePicker msg

Allows picking a single date

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

Options

withTodaysMark : Calendar.Date -> DatePicker msg -> DatePicker msg

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

withRangeLimits : Maybe Calendar.Date -> Maybe Calendar.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 : UI.RenderConfig.RenderConfig -> DatePicker msg -> Element msg

Show the datapicker.

Model management


type Model

The Model holding current viewing month and year.

init : Calendar.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, UI.Effects.Effects msg )

The update function.