The DatePicker
component is a DatePicker that allows the user to
select a single date. It has its own Model
and Msg types which handle the rendering and date
selection functionalities. It also exposes a list of external messages
( ExtMsg ) which can be used by the consumer to extract the selected date.
You can see a simple DatePicker
application in
this ellie-app example or you can clone this
example repository.
Internal.Update.Model
The DatePicker
Model.
Internal.Update.Msg
The internal messages that are being used by the DatePicker
. You can map
this message with your own message in order to "wire up" the DatePicker
with your
application. Example of wiring up:
import DatePicker
type Msg
= DatePickerMsg DatePicker.Msg
DatePickerMsg subMsg ->
let
(subModel, subCmd, extMsg) =
DatePicker.update subMsg model.datePicker
selectedDateTime =
case extMsg of
DatePicker.DateSelected dateTime ->
dateTime
DatePicker.None ->
Nothing
in
( { model | datePicker = subModel }
, Cmd.map DatePickerMsg subCmd
)
The external messages that are being used to pass information to the
parent component. These messages are being returned by the update function
so that the consumer can pattern match on them and get the selected DateTime
.
setSelectedDate : DateTime -> Model -> Model
Sets the date that's marked as selected.
resetSelectedDate : Model -> Model
Removes the date selection.
initialise : Types.ViewType -> Types.CalendarConfig -> Maybe Types.TimePickerConfig -> Maybe I18n -> Model
The initialisation function of the DatePicker
.
import Clock
import DatePicker
import DateTime
import Time exposing (Month(..))
import TimePicker.Types as TimePicker
myInitialise : DateTime -> DatePicker.Model
myInitialise today =
let
( date1, date2 ) =
( DateTime.fromRawParts { day = 1, month = Jan, year = 2019 } { hours = 0, minutes = 0, seconds = 0, milliseconds = 0 }
, DateTime.fromRawParts { day = 31, month = Dec, year = 2019 } { hours = 0, minutes = 0, seconds = 0, milliseconds = 0 }
)
calendarConfig =
{ today = today
, primaryDate = Nothing
, dateLimit =
case ( date1, date2 ) of
( Just d1, Just d2 ) ->
DateLimit { minDate = d1, maxDate = d2 }
_ ->
NoLimit
}
timePickerConfig =
Just
{ pickerType = TimePicker.HH_MM { hoursStep = 1, minutesStep = 5 }
, defaultTime = Clock.midnight
, pickerTitle = "Date Time"
}
in
DatePicker.initialise DatePicker.Single calendarConfig timePickerConfig Nothing
update : Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg, ExtMsg )
The DatePicker's
update function. Can be used in order to "wire up" the DatePicker
with the main application as shown in the example of the DatePicker.Msg.
view : Model -> Html Msg
The DatePicker
view.