DateTimePicker

allowEdit Boolean

Specifies whether the textbox is allowed to be edited by user input or only by selecting a value from the calendar popup.

Default: true

calendarMode String

Specifies the mode of the calendar.

Default: Gregorian

cssClass String

Specifies CSS classes to customize the appearance of the control.

Default: ""

dayHeaderFormat DayHeaderFormat

Specifies the format of the day that is displayed in the header.

Default: Short

enabled Boolean

Specifies whether the control is enabled or disabled, disabled will prevent user interaction.

Default: true

enableMask Boolean

Specifies whether a masked textbox will be rendered using the given format.

Default: false

enableRtl Boolean

Specifies whether to render the control in right to left direction.

Default: false

enableState Boolean

Specifies whether to persist the state of the control between page loads.

Default: false

firstDayOfWeek Number

Specifies the calendar’s first day of the week.

Default: 0

format String DateTimeFormatObject

Specifies the format string or skeleton to be used in the textbox control when entering a value or when a value is selected from the calendar popup.

Default: null

fullScreenMode Boolean

Specifies whether the calendar popup will be opened in full screen mode on a mobile device.

Default: false

htmlAttributes {:}

Specifies additional HTML attributes, such as title, styles, class, id, and name, in a key-value pair format that will be appended to the HTML element. If both the property and equivalent HTML attributes are configured, then the control overrides the property value with the HTML attributes.

Default: {}

keyConfigs {:}

Specifies the key configuration to customize the keyboard shortcuts.

Default: {}

labelType FloatingLabelType

Specifies the condition on when to show the floating label, for example: never, always.

Default: Never

locale String

Specifies the culture and localization value for this control, overriding the globally defined value.

Default: en-US

maskPlaceholder MaskPlaceholderModel

Specifies the mask placeholder that will be displayed on the textbox.

Default: { day: "day", month: "month", year: "year", hour: "hour", minute: "minute", second: "second", dayOfTheWeek: "day of the week" }

max Date

Specifies the maximum allowed date that can be selected in the calendar.

Default: 2099, 12, 31

min Date

Specifies the minimum allowed date that can be selected in the calendar.

Default: 1900, 01, 01

openOnFocus Boolean

Specifies whether to open the calendar popup when the textbox is focused on or only when the calendar open button is clicked.

Default: false

placeholder String

Specifies a short description of what is expected to be entered into the control.

Default: ""

readonly Boolean

Specifies whether the control is readonly disabling all user interaction with the control.

Default: False

scrollTo Date

Specifies the date time value to scroll to when the time popup list is opened.

Default: null

serverTimezoneOffset Number

Specifies the server time zone offset that will be used when processing dates. By default, the date will be processed vase on the system time zone.

Default: null

showClearButton Boolean

Specifies whether to show the clear button or not, allowing the user to clear the current value.

Default: true

showTodayButton Boolean

Specifies whether to show the today button or not.

Default: true

start CalendarView

Specifies the starting view that will be shown when the calendar is rendered.

Default: Month

step Number

Specifies the time interval between the items in the time popup list, for example 30 for a list item every 30 minutes.

Default: 30

strictMode Boolean

Specifies whether to require that the entered date is valid and within the min/max range. If a date is not valid, the previous date will be restored.

Default: False

timeFormat String

Specifies the format of the time value that to be displayed in time popup list.

Default: 30

value Date

Specifies the selected date values for the calendar.

Default: null

view CalendarView

Specifies the maximum view level of the calendar. To restrict the view navigation, ensure the view is smaller than the start view.

Default: Month

weekNumber Boolean

Specifies whether the week number of the year will be displayed in the calendar or not.

Default: false

weekRule WeekRule

Specifies the rule for defining the first week of the year.

Default: FirstDay

width String Number

Specifies the width of the control. By default, the width of the control is determined by its parent container. Value can be expressed in percent or pixels.

Default: null

zIndex Number

Specifies the zIndex of the popup.

Default: 1000

addDate

Adds a single or multiple dates to the value/values property of the calendar. When selectMultiple is enabled, the value property will always be the last date added to the values property.

Returns: Void

addEventListener

Attaches an event handler to a specified element. This method allows you to set up a function that will be called whenever the specified event is delivered to the target element.

Returns: Void

appendTo

Appends the control to the specified HTML element.

Returns: Void

currentView

Gets the current view of the calendar.

Returns: String

dataBind

Applies all pending property changes to the control.

Returns: Void

destroy

Destroys the Aware instance, detaches all related events, removes attributes, css classes and restores the root element.

Returns: Void

focusIn

Sets the focus on the control so it can be interacted with.

Returns: Void

focusOut

Removes focus from the control if currently focused.

Returns: Void

getLocalData

Gets the current properties values for the accordion that will be persisted to the state.

Returns: String

getRootElement

Gets the root element of the control.

Returns: HTMLElement

getStateData

Gets the current persisted state data for the control.

Returns: String

hide

Hides all open popup lists.

Returns: Void

refresh

Applies all pending property changes to the accordion and re-renders the control.

Returns: Void

removeDate

Removes a single or multiple dates from the values property of the calendar.

Returns: Void

removeEventListener

Removes the attached event handler for the specified event listener.

Returns: Void

show

Opens the date or the time popup based on the given type. If no type is passed, then the date popup will appear.

Returns: Void

toggle

Toggle between the opening the date popup list and the time popup list.

Returns: Void

blur EmitType<FocusBlurEventArgs>

Event callback that is raised when focus leaves the control.

change EmitType<ChangeEventArgs>

Event callback that is raised when the value of the calendar is changed.

cleared EmitType<ClearedEventArgs>

Event callback that is raised when the control value is cleared by clicking the clear button.

close EmitType<DatePopupObjectEventArgs>

Event callback that is raised when the calendar popup is closed.

created EmitType<CreatedEventArgs>

Event callback that is raised when the control has been created.

destroyed EmitType<Object>

Event callback that is raised when the control has been destroyed.

focus EmitType<FocusBlurEventArgs>

Event callback that is raised when the control is focused.

navigated EmitType<NavigatedEventArgs>

Event callback that is raised when the calendar is navigated to another level or within the same level of the view.

open EmitType<DatePopupObjectEventArgs>

Event callback that is raised when the calendar popup is opened.

renderDay EmitType<RenderDayEventArgs>

Event callback that is raised when an individual date cell is rendered.