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 =

Model

The DateRangePicker model.

type alias Msg =

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.

initialise : ViewType -> CalendarConfig -> Maybe TimePickerConfig -> 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 { disablePastDates = False }
            , 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

update : Msg -> Model -> ( Model, 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.

PanagiotisGeorgiadis/elm-datepicker/1.0.0

DateRangePicker

Modules