The DatePicker model

Opaque DatePicker Msg type

The Config that is passed to showCalendar to control html classes and valid dates.

• rangeClass: The html class to apply to the selected date range.

• rangeHoverClass: The html class to apply to the selected date range on hover.

• selectedClass: The html class to apply to a single selected date.

• disabledClass: The html class to apply to a disabled/invalid dates.

• validClass: The html class to apply to a valid/selectable dates.

• dayClass: The html class to apply to all dates.

• calendarClass: The html class to apply to the calendar container.

• titleClass: THe html class to apply to the calendar title.

• weekdayFormat: The format of the Weekday labels (Mon, Tue etc.). options:

  • "d": M, T, W, T, F, S, S
  • "dd": M, Tu, W, Th, F, Sa, Su
  • "ddd": Mon, Tue, Wed, Thu, Fri, Sat, Sun
  • "D": Monday, Tuesday, Wednesday, Thursday, Friday, Saturday

• validDate: A function that takes a single date, and the current date, and returns true if that date is available to select, or false if not.

The default config options that will be applied if not overwritten with a config argument to showCalendar

defaultConfig : Config
defaultConfig =
    { rangeClass = "bg-dark-blue white"
    , rangeHoverClass = "bg-dark-blue moon-gray"
    , selectedClass = "bg-dark-blue white"
    , dayClass = "pa1"
    , disabledClass = "moon-gray"
    , validClass = "pointer"
    , calendarClass = "pa3 dib gray"
    , titleClass = "tc"
    , weekdayFormat = "ddd"
    , validDate = validDate
    }


validDate : Maybe Date -> Maybe Date -> Bool
validDate date currentDate =
    DateCore.greaterOrEqual date currentDate

Note: We use tachyons in our default classes, but you don't have to. We don't provide any css, so it's up to you to define these styles, or include tachyons from the cdn, or override them by passing a custom config to showCalendar

The function called to initialise the Calendar. Returns the initial model. Pass it a Selection type to determine whether it will be used to select a single date, or a range of dates.

init : ( Model, Cmd Msg )
init =
    { calendar = DatePicker.initCalendar DatePicker.Single } ! []

The function called to show the calendar. Pass it a config record to customise the DatePicker:

view : Model -> Html Msg
view =
    model
        div
        []
        [ (DatePicker.showCalendar model.calendar (DatePicker.getMonth model.calendar) config) |> Html.map DatePickerMsg ]


config : DatePicker.Config
config =
    let
        config =
            DatePicker.defaultConfig
    in
        { config
            | weekdayFormat = "ddd"
            , validDate = validDate
        }


type Msg
    = DatePickerMsg DatePicker.Msg

The DatePicker update function

Type to pass to initCalendar that will determine if your datepicker will be used to select a single date or a range of dates

Gets current date to initialise the calendar

Get the from date in a selected range

Get the to date in a selected range

Get the current month

Get the next month

Returns whether the calendar is open or not

Get the single selected date

Clears all selected dates

Closes or opens calendar

Clears all selected dates and closes calendar

Sets current month to previous month, and next month to current month

Sets current month to next month, and next month to next month + 1

Manually set the selected date