mercurymedia/elm-datetime-picker/12.0.0

NOTE: the latest version is 12.0.1

DatePicker.DateInput

A configurable DateInput component, formatting and validating text input for dates and times

Model & Msg

type DateInput msg

The opaque type representing a particular DateInput instance.

= ValueInvalid
| ValueNotAllowed
| DurationInvalid

Possible errors in the DateInput field.

type Msg

Messages that can be sent through user interaction to update the DateInput model.

Configuration & Settings

type alias Config =
{ dateInputSettings : Settings
, isDayDisabled : Zone -> Posix -> Bool
, zone : Zone
, theme : Theme
, id : String
}

Configuration settings for DateInput.

type Format
= Date DateFormat
| DateTime DateFormat TimeFormat

Supported date and time formats.

type alias DateFormat =
{ pattern : DatePattern
, separator : Char
, placeholders : DateParts Char
}

Configuration for date formats.

type alias TimeFormat =
{ separator : Char
, placeholders : TimeParts Char
, allowedTimesOfDay :
Zone
-> Posix
-> { startHour : Int
, startMinute : Int
, endHour : Int
, endMinute : Int
}
}

Configuration for time formats.

= DDMMYYYY
| MMDDYYYY
| YYYYMMDD
| YYYYDDMM

Available date format patterns.

type alias Settings =
{ format : Format
, getErrorMessage : InputError -> String
, disabled : Bool
}

Settings for the DateInput component.

Defaults

defaultConfig : Zone -> Config

Default configuration for DateInput.

defaultDateFormat : DateFormat

Default date format pattern.

Default format used for DateInput.

defaultSettings : Settings

Default settings for DateInput.

defaultTimeFormat : TimeFormat

Default time format settings.

Init & Updates

Clears the DateInput field.

init : (Msg -> msg) -> DateInput msg

Returns a DateInput instance initialized with default values.

toPosix : Zone -> DateInput msg -> Maybe Posix

Converts a DateInput model into a Posix time, if possible.

update : Config -> Msg -> DateInput msg -> ( DateInput msg, Cmd msg )

Update the DateInput based on user interaction according to the given internal msg.

Returns the updated DateInput and a Cmd msg.

updateFromPosix : Config -> Zone -> Posix -> DateInput msg -> DateInput msg

Updates the DateInput model from a given Posix time.

Converts the time into date and time parts and updates the model accordingly.

Query

Zone
-> ( DateInput msg, DateInput msg )
-> ( Bool, Maybe InputError )

Checks if one of the two DateInputs of a duration input has an error, returning a boolean and an optional error.

hasError : DateInput msg -> Bool

Checks if the DateInput has an error.

isInitial : DateInput msg -> Bool

Checks if it's still the initial model

IDs

containerId : Config -> String

Generates the ID for the container element based on the provided configuration.

durationEndId : String -> String

Generates the ID for a duration's end input element based on the provided configuration.

durationStartId : String -> String

Generates the ID for a duration's start input element based on the provided configuration.

textFieldId : Config -> String

Generates the ID for the text field element based on the provided configuration.

View

view : List (Attribute msg) -> Config -> DateInput msg -> Html msg

Renders a single date input element view with error handling and theme styling.

viewContainer : Theme -> List (Attribute msg) -> List (Html msg) -> Html msg

Renders a container element for the date input element. This element is scaled to the date input element's size and is used to position the picker popover.

List (Attribute msg)
-> Config
-> ( DateInput msg, DateInput msg )
-> Html msg

Renders two date input fields (start and end) for duration picking with error handling and theme styling.

viewPlaceholder : Config -> Html msg

Renders a placeholder view based on the configuration. This element is empty and scaled to the date input element's size. It is used in combination with the picker popover working as a placeholder to arrange the picker popover's layout. The real date input element will be positioned fixed above this element when the picker popover is opened.

Test

partsToPosix : Zone -> DateParts (Maybe Int) -> TimeParts (Maybe Int) -> Maybe Posix

Converts date and time parts into a Posix time.

Returns Nothing if the parts do not form a valid date/time.

sanitizeInputValue : Format -> String -> String

Cleans and truncates the user input value based on the given format.

-> String
-> ( DateParts (Maybe Int), TimeParts (Maybe Int) )

Converts an input string into date and time parts.

-> DateParts (Maybe Int)
-> TimeParts (Maybe Int)
-> Maybe String

Converts date and time parts into an input string value.

Config
-> String
-> DateParts (Maybe Int)
-> TimeParts (Maybe Int)
-> Maybe InputError

Checks if the input value, date parts, and time parts are valid and allowed based on the provided configuration, returning an optional error.