Link copied!

Date-Time Picker API

API Reference e-datetime

HTML Attributes API

Name Description Type Required Default value
value Defines initial value of the component. It should be an ISO date. Time zone is not handled in the component. string | { start: string, end: string }
type Defines the type of the component. "date" | "datetime" | "daterange" | "datetimerange" date
error Defines the error state of the component. The component does not set this state to true even if the date entered in the input field is invalid. boolean false
disabled Defines the disabled state of the component. If true, the picker cannot be opened. boolean false
inline Renders the component as inline-block boolean false
min-date Defines the minimum selectable date. The required format is ISO date. string
max-date Defines the maximum selectable date. The required format is ISO date. string
clear-hidden Hides the clear button on datetime component. boolean false
today-hidden Determines the visibility of the show today button under the calendar boolean false
manual-apply Adds buttons to the panel footer to confirm or cancel changes boolean false
start-disabled Disabled only the start date picker. boolean false
end-disabled Disabled only end date picker. boolean false
presets-disabled Disabled preset buttons. boolean false

JavaScript API

Name Type Description Arguments
open() Opens the calendar popup

Events

Event Description Returns
change Fires on date select. The type of value is string for date and datetime and { start: string, end: string } for daterange and datetimerange. The format is "yyyy-mm-dd" for date and daterange and "yyyy-mm-dd hh:mm" for datetime and datetimerange. 
{
  detail: {
    value
  }
}
error Fires on invalid date. The type of value is string for date and datetime and { start: string, end: string } for daterange and datetimerange. The format is "yyyy-mm-dd" for date and daterange and "yyyy-mm-dd hh:mm" for datetime and datetimerange. Empty value is sent as empty string and invalid values as Invalid Date in the inputValue detail. Value contains the last valid value of the picker and inputValue contains the current value of the inputs on the panel. 
{
  detail: {
    value,
    inputValue
  }
}
close Fires on date component close. 
{
  type: "close"
}
open Fires on date component open. 
{
  type: "open"
}

API Reference e-datetime-preset

HTML Attributes API

Name Description Type Required Default value
name Defines the label that will be displayed for the preset string true
value Defines the value that the preset will set on click { start: string, end: string } true
order If order is set, presets will be dipslayed in the given order. Otherwise, they will be displayed in the order of their insertion to the DOM number