A customisable DatePicker that easily allows you to select a range of dates
The DatePicker model
Opaque DatePicker Msg type
{ rangeClass : String
, rangeHoverClass : String
, selectedClass : String
, disabledClass : String
, validClass : String
, dayClass : String
, calendarClass : String
, titleClass : String
, weekdayFormat : String
, weekdayFormatter : String -> Time.Weekday -> String
, titleFormatter : ( Basics.Int
, Time.Month ) -> String
, validDate : Maybe Date -> Maybe Date -> Basics.Bool
}
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:
weekdayFormatter: Custom implementation of weekdayFormat
, needed to support non-english languages.
titleFormatter: Format title based on year and month.
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.
defaultConfig : Config
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"
, weekdayFormatter = defaultWeekdayFormatter
, titleFormatter = defaultTitleFormatter
, 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
initCalendar : Selection -> DatePicker
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 }
, Cmd.none
)
showCalendar : DatePicker -> Config -> Html Msg
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 config
|> Html.map DatePickerMsg
]
config : DatePicker.Config
config =
let
config =
DatePicker.defaultConfig
in
{ config
| weekdayFormat = "ddd"
, validDate = validDate
}
type Msg
= DatePickerMsg DatePicker.Msg
showCalendarForMonth : ( Basics.Int, Time.Month ) -> DatePicker -> Config -> Html Msg
Show any month from the calendar
update : Msg -> DatePicker -> DatePicker
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
receiveDate : Platform.Cmd.Cmd Msg
Gets current date to initialise the calendar
These functions allow you to access data from the DatePicker model.
getFrom : DatePicker -> Maybe Date
Get the from
date in a selected range
getTo : DatePicker -> Maybe Date
Get the to
date in a selected range
getMonth : DatePicker -> ( Basics.Int, Time.Month )
Get the current month
isOpen : DatePicker -> Basics.Bool
Returns whether the calendar is open or not
getSelectedDate : DatePicker -> Maybe Date
Get the single selected date
These functions allow us to perform updates to the datepicker model. Just pass the datepicker as the last argument. For example:
newDatepicker = DatePicker.setDate date datepicker
Or
newDatePicker = DatePicker.clearDates datepicker
clearDates : DatePicker -> DatePicker
Clears all selected dates
toggleCalendar : DatePicker -> DatePicker
Closes or opens calendar
cancelDates : DatePicker -> DatePicker
Clears all selected dates and closes calendar
previousMonth : DatePicker -> DatePicker
Sets current month to previous month, and next month to current month
nextMonth : DatePicker -> DatePicker
Sets current month to next month, and next month to next month + 1
setDate : Date -> DatePicker -> DatePicker
Manually set the selected date
setMonth : ( Basics.Int, Time.Month ) -> DatePicker -> DatePicker
Manually set the selected month