abadi199/datetimepicker/6.0.0

NOTE: this package is not compatible with Elm 0.19.1

DateTimePicker.Config

DateTimePicker configuration

Configuration

type alias Config otherConfig msg =
{ otherConfig
| onChange : State -> Maybe Date -> msg
, autoClose : Bool
, i18n : I18n
, usePicker : Bool
, attributes : List (Attribute msg)
}

Configuration

  • onChange is the message for when the selected value and internal State in the date picker has changed.
  • autoClose is a flag to indicate whether the dialog should be automatically closed when a date and/or time is selected.
  • i18n is internationalization configuration.
type alias I18n =
{ titleFormatter : Date -> String
, footerFormatter : Date -> String
, timeTitleFormatter : Date -> String
, inputFormat : InputFormat
}

Internationalization configuration

  • footerFormatter is a Date to string formatter used to display the date in the footer section.
  • titleFormatter is a Date to string formatter used to display the date in the title section.
  • timeTitleFormatter is a Date to string formatter used to display the time in the title section.
  • inputFormat is an input date formatter and parser.
type alias InputFormat =
{ inputFormatter : Date -> String
, inputParser : String -> Maybe Date
}

Input formatter and parser

  • inputFormatter is a Date to string formatter used to display the date in the input text
  • inputParser is a String to Date parser used to parsed input text into Date
type alias DatePickerConfig otherConfig =
{ otherConfig
| nameOfDays : NameOfDays
, firstDayOfWeek : Day
, allowYearNavigation : Bool
}

Configuration for the DatePicker

  • nameOfDays is the configuration for name of days in a week.
  • firstDayOfWeek is the first day of the week.
  • titleFormatter is the Date to String formatter for the dialog's title.
  • footerFormatter is the Date to String formatter for the dialog's footer.
  • allowYearNavigation show/hide year navigation button.
type alias TimePickerConfig =
{ timePickerType : TimePickerType }

Configuration for TimePicker

  • timePickerType is the type of the time picker, either Analog or Digital
type alias NameOfDays =
{ sunday : String
, monday : String
, tuesday : String
, wednesday : String
, thursday : String
, friday : String
, saturday : String
}

Configuration for name of days in a week.

This will be displayed as the calendar's header. Default:

  • sunday = "Su"
  • monday = "Mo"
  • tuesday = "Tu"
  • wednesday = "We"
  • thursday = "Th"
  • friday = "Fr"
  • saturday = "Sa"
= Digital
| Analog

The type of time picker, can be either Digital or Analog

type Type msg className
= DateType
(Config (CssConfig (DatePickerConfig {}) msg className) msg)
| DateTimeType
(Config
(CssConfig (DatePickerConfig TimePickerConfig) msg className)
msg
)
| TimeType
(Config (CssConfig TimePickerConfig msg className) msg)

The type of picker (for Internal Use)

type alias CssConfig otherConfig msg className =
{ otherConfig | class : List className -> Attribute msg }

CSS Function Configuration

  • class is a function that turn a list of CSS Classes into an Html.Attribute

Default Configuration

(State -> Maybe Date -> msg)
-> Config (CssConfig (DatePickerConfig {}) msg className) msg

Default configuration for DatePicker

  • onChange No Default
  • autoClose Default: True
  • nameOfDays see NameOfDays for the default values.
  • firstDayOfWeek Default: Sunday.
  • allowYearNavigation Default : True
(State -> Maybe Date -> msg)
-> Config (CssConfig TimePickerConfig msg className) msg

Default configuration for TimePicker

  • onChange No Default
  • dateFormatter Default: "%m/%d/%Y"
  • dateTimeFormatter Default: "%m/%d/%Y %I:%M %p"
  • autoClose Default: False
  • timeFormatter Default: "%I:%M %p"
  • timePickerType Default: Analog
(State -> Maybe Date -> msg)
-> Config
(CssConfig (DatePickerConfig TimePickerConfig) msg className)
msg

Default configuration for DateTimePicker

  • onChange No Default
  • dateFormatter Default: "%m/%d/%Y"
  • dateTimeFormatter Default: "%m/%d/%Y %I:%M %p"
  • autoClose Default: False
  • nameOfDays see NameOfDays for the default values.
  • firstDayOfWeek Default: Sunday.
  • titleFormatter Default: "%B %Y"
  • fullDateFormatter Default: "%A, %B %d, %Y"
  • timeFormatter Default: "%I:%M %p"
  • timePickerType Default: Analog
  • allowYearNavigation Default : True

Default Date internationalization

  • titleFormatter Default: "%B %Y"
  • footerFormatter Default: "%A, %B %d, %Y"
  • inputFormat Default: "%m/%d/%Y"

Default Time internationalization

  • titleFormatter Default: "%B %Y"
  • footerFormatter Default: "%A, %B %d, %Y"
  • inputFormat Default: "%I:%M %p"

Default Date and Time internationalization

  • titleFormatter Default: "%B %Y"
  • footerFormatter Default: "%A, %B %d, %Y"
  • inputFormat Default: "%m/%d/%Y %I:%M %p"

Default input format for date picker

Default input format for date and time picker

Default CSS Namespace