The DateRangePicker model.

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.

The start and end dates returned as a payload by the DateRangeSelected external message.

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.

Helper function that resets the SelectedDateRange.

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.

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
                , pickerTitles = { start = "Start Date Time", end = "End Date Time" }
                , mirrorTimes = True
                }
    in
    DateRangePicker.initialise DateRangePicker.Single calendarConfig timePickerConfig

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.

The DateRangePicker view function.