PanagiotisGeorgiadis / elm-datepicker / DateRangePicker

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.


type alias Model =
Internal.Update.Model

The DateRangePicker model.


type alias Msg =
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
    )


type ExtMsg
    = None
    | DateRangeSelected (Maybe SelectedDateRange)

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.


type alias SelectedDateRange =
{ 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:

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.