fabhof / elm-ui-datepicker / DatePicker

Basic Usage

input : List (Element.Attribute msg) -> { onChange : ChangeEvent -> msg, selected : Maybe Date, text : String, label : Element.Input.Label msg, placeholder : Maybe (Element.Input.Placeholder msg), model : Model, settings : Settings } -> Element msg

Use it like you would Input.text, the attributes, text, placeholder and label will behave exactly like for Input.text. It has however a more complex onChange, a selected date, the internal model and some settings.

Note: Events.onClick, Events.onFocus and Events.onLoseFocus are used internally by the date picker. This means, that your own Events.onClick, Events.onFocus and Events.onLoseFocus attributes have no effect and will not fire.


type Model

init : Model

The initial model of the date picker. Easy to us in your own init function:

(You probably want to get todays date to give it to the date picker using DatePicker.setToday)

init =
    ( { date = Nothing
      , dateText = ""
      , pickerModel = DatePicker.init
      }
    , Task.perform SetToday Date.today
    )

setToday : Date -> Model -> Model

Sets the day that should be marked as today.


type ChangeEvent
    = DateChanged Date
    | TextChanged String
    | PickerChanged Msg

Use in your update function:

update msg model =
    case msg of
        ChangePicker changeEvent ->
            case changeEvent of
                DateChanged date ->
                    -- update both date and text
                    ( { model
                        | date = Just date
                        , dateText = Date.toIsoString date
                      }
                    , Cmd.none
                    )

                TextChanged text ->
                    ( { model
                        | date =
                            -- parse the text in any way you like
                            Date.fromIsoString text
                                |> Result.toMaybe
                                |> Maybe.Extra.orElse model.date
                        , dateText = text
                      }
                    , Cmd.none
                    )

                DateCleared ->
                    ( { model
                        | date =
                            Nothing
                        , dateText = ""
                      }
                    , Cmd.none
                    )

                PickerChanged subMsg ->
                    -- internal stuff changed
                    -- call DatePicker.update
                    ( { model
                        | pickerModel =
                            model.pickerModel
                                |> DatePicker.update subMsg
                      }
                    , Cmd.none
                    )

update : Msg -> Model -> Model


type alias Settings =
{ firstDayOfWeek : Time.Weekday
, language : Maybe Language
, disabled : Date -> Basics.Bool
, pickerAttributes : List (Element.Attribute Basics.Never)
, headerAttributes : List (Element.Attribute Basics.Never)
, tableAttributes : List (Element.Attribute Basics.Never)
, weekdayAttributes : List (Element.Attribute Basics.Never)
, dayAttributes : List (Element.Attribute Basics.Never)
, monthYearAttribute : List (Element.Attribute Basics.Never)
, wrongMonthDayAttributes : List (Element.Attribute Basics.Never)
, todayDayAttributes : List (Element.Attribute Basics.Never)
, selectedDayAttributes : List (Element.Attribute Basics.Never)
, disabledDayAttributes : List (Element.Attribute Basics.Never)
, monthsTableAttributes : List (Element.Attribute Basics.Never)
, yearsTableAttributes : List (Element.Attribute Basics.Never)
, headerButtonsAttributes : List (Element.Attribute Basics.Never)
, previousMonthElement : Element Basics.Never
, nextMonthElement : Element Basics.Never 
}

All the possible configuration settings. You probably want to start at the defaultSettings and only change what you need. It's probably easiest to look at the code to see where each attribute list is used for.

defaultSettings : Settings

Reasonable default settings.

initWithToday : Date -> Model

The initial model of the date picker and sets the given date as today.

Helpers

For when you want to be more in control

close : Model -> Model

Closes the date picker.

Example: close date picker on date input:

DateChanged date ->
    ( { model
        | date = Just date
        , dateText = Date.toIsoString date
        , pickerModel =
            model.pickerModel
                |> DatePicker.close
    }
    , Cmd.none
    )

Note: the date picker will reopen on focus and click. To prevent this, close the date picker on every update:

PickerChanged subMsg ->
    ( { model
        | pickerModel =
            model.pickerModel
                |> DatePicker.update subMsg
                --picker will never open
                |> DatePicker.close
        }
    , Cmd.none
    )

open : Model -> Model

Opens the date picker.

Example: start with open picker:

init : ( Model, Cmd Msg )
init =
    ( { date = Nothing
      , dateText = ""
      , pickerModel =
            DatePicker.init
                |> DatePicker.open
      }
    , Task.perform SetToday Date.today
    )

setVisibleMonth : Date -> Model -> Model

Sets the current visible month of the date picker.


type SelectorLevel
    = DaysLevel
    | MonthsLevel
    | YearsLevel

The different selector levels the date picker can show.

setSelectorLevel : SelectorLevel -> Model -> Model

Sets the selector level that is visible when date picker is open.

Example: start on the year level:

init : ( Model, Cmd Msg )
init =
    ( { date = Nothing
      , dateText = ""
      , pickerModel =
            DatePicker.init
                |> DatePicker.setSelectorLevel DatePicker.YearsLevel
      }
    , Task.perform SetToday Date.today
    )


type alias Language =
Date.Language

Alias of Language from justinmimbs/date.