PanagiotisGeorgiadis / elm-datepicker / DatePicker

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.


type alias Model =
Internal.Update.Model

The DatePicker Model.


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


type ExtMsg
    = None
    | DateSelected (Maybe DateTime)

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.