dwyl / elm-datepicker / DatePicker

A customisable DatePicker that easily allows you to select a range of dates


type DatePicker

The DatePicker model


type Msg

Opaque DatePicker Msg type


type alias Config =
{ 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.

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 Selection
    = Single
    | Range

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

Getter Functions

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

API Functions

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