bluedogtraining / bdt-elm / Form.DatePicker

This module is useful if you want to add a DatePicker Form element to your app.

Initialise and update


type Model

Add a DatePicker.Model to your model.

type alias MyModel =
    { myDatePicker : DatePicker.Model
    }

init : Model

Init a DatePicker.Model in your model.

myInitialModel : MyModel
myInitialModel =
    { myDatePicker = DatePicker.init
    }


type alias Msg =
Internal.Msg

Add a DatePicker.Msg to your Msg.

type MyMsg
    = UpdateMyDatePicker DatePicker.Msg

update : Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg )

Use in your update function.

myUpdate : Msg -> Model -> ( Model, Cmd Msg )
myUpdate msg model =
    case msg of
        UpdateMyDatePicker datePickerMsg ->
            let
                ( newDatePicker, cmd ) =
                    DatePicker.update datePickerMsg mode.myDatePicker
            in
            { model | myDatePicker = newDatePicker } ! [ cmd ]

View and render

view : Model -> View

Transform an DatePicker.Model into an DatePicker.View, which allows us to pipe View Setters on it.

myView : Model -> Html Msg
myView model =
    div
        []
        [ DatePicker.view model.myDatePicker -- pipe view setters here, for example |> setIsLocked 'your logic here'
        ]

render : View -> Html.Styled.Html Msg

Transforms an DatePicker.View into Html DatePicker.Msg

myView : Model -> Html Msg
myView model =
    div
        []
        [ DatePicker.view model.myDatePicker
            |> DatePicker.render
            |> Html.map UpdateMyDatePicker
        ]

State Setters

reInitialise : Model -> Model

ReInitialise your DatePicker.Model.

reset : Model -> Model

Reset your DatePicker.Model.

setTimeZone : Time.Zone -> Model -> Model

Set the TimeZone

setInitialPosix : Maybe Time.Posix -> Model -> Model

Set the initial Date of your DatePicker.Model.

setSelectedPosix : Maybe Time.Posix -> Model -> Model

Change the Date of your DatePicker.Model.

View Setters

setMinPosix : Maybe Time.Posix -> View -> View

Set the min. date. Dates prior to this can't be selected. Navigation is also capped to this date.

setMaxPosix : Maybe Time.Posix -> View -> View

Set the min. date. Dates subsequent to this can't be selected. Navigation is also capped to this date.

setIncludeTime : Basics.Bool -> View -> View

Sets whether your date picker should include a time picker.

setIsInput : Basics.Bool -> View -> View

Set whether your date picker is displayed as an input.

setIsError : Basics.Bool -> View -> View

Set whether your datePicker is in error mode (red border).

setIsLocked : Basics.Bool -> View -> View

Set whether your datePicker is locked (disabled).

setIsClearable : Basics.Bool -> View -> View

Set whether your datePicker is clearable (x icon).

setDefaultLabel : String -> View -> View

Set the default label, for example (-- NOTHING SELECTED --).

setId : String -> View -> View

Give your datePicker an id. Can be useful for DOM selectors (focus, WebComponents etc.)

Getters

getIsChanged : Model -> Basics.Bool

Whether your datePicker was changed. Useful if you want to disable save buttons unless there were changes etc.

getIsOpen : Model -> Basics.Bool

Whether this datePicker is currently open.

getInitialPosix : Model -> Maybe Time.Posix

Get the initial Date of your datePicker.

getSelectedPosix : Model -> Maybe Time.Posix

Get the current Date of your datePicker. This is what you'd use to display the data somewhere outside of your datePicker, or to send the data to the backend for example etc.

getId : View -> Maybe String

Useful if you need the id of the datePicker in your update function, to set focus etc.