📅 Date and Time Picker
The date and time picker can be used in two modes:
Code:
view model =
DateTimePicker.dateTimePickerWithConfig
{ defaultDateTimeConfig | timePickerType = DateTimePicker.Config.Analog }
[ class "my-datetimepicker" ]
model.state
model.value
Code:
view model =
DateTimePicker.dateTimePickerWithConfig
{ defaultDateTimeConfig | timePickerType = DateTimePicker.Config.Digital }
[ class "my-datetimepicker" ]
model.state
model.value
Just the date picker without the time.
Code:
type Msg = DateChange DateTimePicker.State (Maybe Date)
type alias Model = { value : Maybe Date, state : DateTimePicker.State }
view model =
DateTimePicker.datePicker
DateChange
[ class "my-datepicker" ]
model.state
model.value
Just the time picker without the date.
Code:
type Msg = TimeChange DateTimePicker.State (Maybe Date)
type alias Model = { value : Maybe Date, state : DateTimePicker.State }
view model =
DateTimePicker.timePicker
TimeChange
[ class "my-timepicker" ]
model.state
model.value
This package follows the evancz\sortable-table
package approach where it's not
a nested elm architecture 'component'. It's just view functions where you feed
the data and the message constructor to the function. It does use an opaque
State
to maintain its internal state.
The picker requires the initial value of the date (usually today) to set the initial position of the calendar. To feed this date to the picker's internal state, you can use 2 approaches
Date
value to the DateTimePicker.initialStateWithToday
function when initialing the picker's State.DateTimePicker.initialCmd
as part of your init
commands.The date time picker package provides multiple view functions, depending on how you want to use the picker.
datePicker
is a simple date picker view, with no time picker, and comes with
all default configuration.timePicker
is a simple time picker view, with no date picker, and comes with
all default configuration.dateTimePicker
is a simple date and time picker view, comes with all default
configuration.datePickerWithConfig
is a configurable date picker view.timePickerWithConfig
is a configurable time picker view.dateTimePickerWithConfig
is a configurable date and time picker view.You customize the date picker configuration by passing a
DateTimePicker.Config.Config
value to the picker's view function. The
DateTimePicker.Config module provides some default configurations for both date
picker and date time picker.
In order to localize your date format, you need to provide the date time picker
with a Date
to String
formatter and String
to Maybe Date
parser. The
author recommends using
rluiten/elm-date-extra
for the formatter, and
abadi199/dateparser
for the parser.
The
rtfeldman/elm-css
code for this package is available as separate package as
abadi199/datetimepicker-css,
that way, you can still use package without having to have dependency to elm-css
or if your project is using different version of elm-css
. Just the download
compiled
styles.css
in include it in your html
. If you're using elm-css
in your project, and you
want to bundle the DateTimePicker's css along with our project css, please refer
to
abadi199/datetimepicker-css
Here's a snippet of typical Elm application:
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
type Msg
= DateChange DateTimePicker.State (Maybe Date)
type alias Model =
{ selectedDate : Maybe Date
, datePickerState : DateTimePicker.State
}
init =
( { selectedDate = Nothing, datePickerState = DateTimePicker.initialState }
, DateTimePicker.initialCmd DateChange DateTimePicker.initialState
)
view model =
DateTimePicker.dateTimePickerWithConfig
DateChange
[ class "my-datetimepicker" ]
model.datePickerState
model.selectedDate
update msg model =
case msg of
DateChange datePickerState selectedDate ->
( { model | selectedDate = selectedDate, datePickerState = datePickerState }, Cmd.none )
subscriptions =
...
For a complete sample code, please see the demo folder of the source code.