The DateRangePicker
component is a DatePicker that allows the user to
select a range of dates. 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 dates in
the form of a startDate and an endDate. You can see a simple DateRangePicker
application in this ellie-app example or you can clone this
example repository.
Internal.Update.Model
The DateRangePicker
model.
Internal.Update.Msg
The internal messages that are being used by the DateRangePicker
. You can map
this message with your own message in order to "wire up" the DateRangePicker
with your
application. Example of wiring up:
import DateRangePicker
type Msg
= DateRangePickerMsg DateRangePicker.Msg
DateRangePickerMsg subMsg ->
let
( subModel, subCmd, extMsg ) =
DateRangePicker.update subMsg model.dateRangePicker
selectedDateRange =
case extMsg of
DateRangePicker.DateRangeSelected dateRange ->
dateRange
DateRangePicker.None ->
Nothing
in
( { model | dateRangePicker = subModel }
, Cmd.map DateRangePickerMsg 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
.
{ startDate : DateTime
, endDate : DateTime
}
The start and end dates returned as a payload by the DateRangeSelected
external message.
resetVisualSelection : Model -> Model
Helper function that resets the Visually
selected date range. It will reset the date range if
the user has selected only a start date. In case the user has already selected a valid date range
this function will do nothing.
resetSelectedDateRange : Model -> Model
Helper function that resets the SelectedDateRange
.
setDateRange : SelectedDateRange -> Model -> Model
Sets the date range based on the dates that were provided. This can be useful in setting a default value or even updating the date range from an "external" action that took place in the "parent" component.
Note:
If you've provided a DateLimit
on your DateRangePicker
module you need to make
sure that the start and end dates that you are using here are within these limitations.
If you are using a dateRangeOffset limitation on your DateRangePicker
, then you'll
need to make sure that the start and end dates are at least n number of dates apart,
where n == minDateRangeLength.
In the case of an invalid start or end date the setDateRange
function
will return the Model
without any changes.
initialise : Types.ViewType -> Types.CalendarConfig -> Maybe Types.TimePickerConfig -> Maybe DatePicker.I18n.I18n -> Model
The initialisation function of the DateRangePicker
.
import Clock
import DateRangePicker
import DateTime
import Time exposing (Month(..))
import TimePicker.Types as TimePicker
myInitialise : DateTime -> DateRangePicker.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
, dateRangeOffset = Just { minDateRangeLength = 7 }
}
timePickerConfig =
Just
{ pickerType = TimePicker.HH_MM { hoursStep = 1, minutesStep = 5 }
, defaultTime = Clock.midnight
, mirrorTimes = True
, i18n =
{ start = "Arrival time"
, end = "Departure time"
, checkboxText = "Same as arrival time"
}
}
in
DateRangePicker.initialise DateRangePicker.Single calendarConfig timePickerConfig Nothing
update : Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg, ExtMsg )
The DateRangePicker's
update function. Can be used in order to "wire up" the DateRangePicker
with the main application as shown in the example of the DateRangePicker.Msg.
view : Model -> Html Msg
The DateRangePicker
view function.