Datetime
Default
<e-datetime></e-datetime><e-datetime></e-datetime>JavaScript
Variations
Initial value
<e-datetime value="2019-12-04"></e-datetime><e-datetime value="2019-12-04"></e-datetime>JavaScript
Datetime
<e-datetime type="datetime" value="2019-12-04 12:34"></e-datetime><e-datetime type="datetime" value="2019-12-04 12:34"></e-datetime>JavaScript
Daterange
<e-datetime type="daterange" value="{ "start": "2019-12-04", "end": "2019-12-20" }"></e-datetime><e-datetime type="daterange" value="{ "start": "2019-12-04", "end": "2019-12-20" }"></e-datetime>JavaScript
Datetimerange
<e-datetime type="datetimerange" value="{ "start": "2019-12-04 12:34", "end": "2019-12-20 15:56" }"></e-datetime><e-datetime type="datetimerange" value="{ "start": "2019-12-04 12:34", "end": "2019-12-20 15:56" }"></e-datetime>JavaScript
Without clear
<e-datetime clear-hidden value="2019-12-04"></e-datetime><e-datetime clear-hidden value="2019-12-04"></e-datetime>JavaScript
Minimum date
<e-datetime min-date="2019-12-12"></e-datetime><e-datetime min-date="2019-12-12"></e-datetime>JavaScript
Maximum date
<e-datetime max-date="2019-12-12"></e-datetime><e-datetime max-date="2019-12-12"></e-datetime>JavaScript
Inline
<e-datetime inline></e-datetime><e-datetime inline></e-datetime>JavaScript
Error
<e-datetime error></e-datetime><e-datetime error></e-datetime>JavaScript
Disabled
<e-datetime disabled></e-datetime><e-datetime disabled></e-datetime>JavaScript
Datetime with presets
<e-datetime type="daterange">
<e-datetime-preset value="{ "start": "2019-12-07", "end": "2019-12-19" }" name="Last 10 days" order="1"></e-datetime-preset>
<e-datetime-preset value="{ "start": "2019-10-17", "end": "2019-12-17" }" name="Last 2 months" order="3"></e-datetime-preset>
<e-datetime-preset value="{ "start": "2019-11-17", "end": "2019-12-17" }" name="Last month" order="2"></e-datetime-preset>
</e-datetime><e-datetime type="daterange">
<e-datetime-preset value="{ "start": "2019-12-07", "end": "2019-12-19" }" name="Last 10 days" order="1"></e-datetime-preset>
<e-datetime-preset value="{ "start": "2019-10-17", "end": "2019-12-17" }" name="Last 2 months" order="3"></e-datetime-preset>
<e-datetime-preset value="{ "start": "2019-11-17", "end": "2019-12-17" }" name="Last month" order="2"></e-datetime-preset>
</e-datetime>JavaScript
API Reference e-datetime
Properties
| 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 or { start: string, end: string } | - | |
| type | Defines the type of the component. | 'date' | 'datetime' | 'daterange' | 'datetimerange' | - | date |
| clear-hidden | Hides the clear button on datetime component. | boolean | - | false |
| 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 | - |
API Reference e-datetime-preset
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| name | Defines the label that will be displayed for the preset | string | ||
| value | Defines the value that the preset will set on click | { start: string, end: string } | ||
| 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 | - |
Method
| Name | Description |
|---|---|
open() | Opens the calendar |
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. Empty value is sent as empty string and invalid values as 'Invalid Date'. | {
detail: {
value
}
} |
close | Fires on date component close. | {
type: 'close'
} |