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.
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.
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
{ 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.
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.
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
)
Date.Language
Alias of Language
from justinmimbs/date
.