Date-Time Picker

An input component for selecting dates, times, and date ranges with an interactive calendar panel.

Date-Time Picker

e-datetime

Preview

Config

Type

Defines the type of the component.

—datedatetimedaterangedatetimerange

Value

Defines initial value. ISO date string or JSON object with start/end for ranges.

Placeholder

Defines the placeholder if no date or date range is selected.

Inline

Makes the component to render as an inline-block element.

Min Date

Defines the minimum selectable date. ISO date format.

Max Date

Defines the maximum selectable date. ISO date format.

Error

Defines the error state of the component.

Disabled

Defines the disabled state. If true, the picker cannot be opened.

Clear Hidden

Hides the clear button.

Today Hidden

Determines the visibility of the show today button under the calendar.

Manual Apply

Adds confirm/cancel buttons to the panel footer.

Open in playground →

Date Range With Presets

e-datetime-preset

Preview

Config

Type

Defines the type of the component.

—datedatetimedaterangedatetimerange

Value

Defines initial value. ISO date string or JSON object with start/end for ranges.

Placeholder

Defines the placeholder if no date or date range is selected.

Inline

Makes the component to render as an inline-block element.

Min Date

Defines the minimum selectable date. ISO date format.

Max Date

Defines the maximum selectable date. ISO date format.

Error

Defines the error state of the component.

Disabled

Defines the disabled state. If true, the picker cannot be opened.

Clear Hidden

Hides the clear button.

Today Hidden

Determines the visibility of the show today button under the calendar.

Manual Apply

Adds confirm/cancel buttons to the panel footer.

Start Disabled

Disables only the start date picker.

End Disabled

Disables only the end date picker.

Presets Disabled

Disables preset buttons.

Open in playground →