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
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
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.
renderElement : UI.RenderConfig.RenderConfig -> DatePicker msg -> Element msg
Show the datapicker.
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.
Contains a pre-defined datapicker's change.
update : Msg -> Model -> ( Model, UI.Effects.Effects msg )
The update function.