import { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser, RippleOptions } from '@syncfusion/ej2-base';import { Animation, EmitType, Event, AnimationModel, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';import { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';import { ModuleDeclaration, extend, Touch, SwipeEventArgs } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input } from '@syncfusion/ej2-inputs';import { BlurEventArgs, ClearedEventArgs, CalendarType, CalendarView, DayHeaderFormats } from '../calendar/calendar';import { DatePicker, PopupObjectArgs } from '../datepicker/datepicker';import { TimePickerBase } from '../timepicker/timepicker';import {MaskPlaceholderModel} from '../common/maskplaceholder-model'; import {DatePickerModel} from "../datepicker/datepicker-model"; /** * Interface for a class DateTimePicker */ export interface DateTimePickerModel extends DatePickerModel{ /** * Specifies the format of the time value that to be displayed in time popup list. * * @default null */ timeFormat?: string; /** * Specifies the time interval between the two adjacent time values in the time popup list . * * @default 30 */ step?: number; /** * Specifies the scroll bar position if there is no value is selected in the timepicker popup list or * the given value is not present in the timepicker popup list. * {% codeBlock src='datetimepicker/scrollTo/index.md' %}{% endcodeBlock %} * * @default null */ scrollTo?: Date; /** * specifies the z-index value of the popup element. * * @default 1000 * @aspType int */ zIndex?: number; /** * Gets or sets the selected date of the Calendar. * * @default null * @isGenericType true */ value?: Date; /** * Customizes the key actions in DateTimePicker. * For example, when using German keyboard, the key actions can be customized using these shortcuts. * * * Input Navigation * * * * * * * * * *

* Key action	* Key
* altUpArrow	* alt+uparrow
* altDownArrow	* alt+downarrow
* escape	* escape

* * Calendar Navigation (Use the following list of keys to navigate the currently focused Calendar after the popup has opened). * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* Key action	* Key
* controlUp	* ctrl+38
* controlDown	* ctrl+40
* moveDown	* downarrow
* moveUp	* uparrow
* moveLeft	* leftarrow
* moveRight	* rightarrow
* select	* enter
* home	* home
* end	* end
* pageUp	* pageup
* pageDown	* pagedown
* shiftPageUp	* shift+pageup
* shiftPageDown	* shift+pagedown
* controlHome	* ctrl+home
* controlEnd	* ctrl+end
* altUpArrow	* alt+uparrow
* spacebar	* space
* altRightArrow	* alt+rightarrow
* altLeftArrow	* alt+leftarrow

* * TimePicker Navigation (Use the below list of shortcut keys to interact with the TimePicker after the TimePicker Popup has opened). * * * * * * * * * * * *

* Key action	* Key
* down	* downarrow
* up	* uparrow
* left	* leftarrow
* right	* rightarrow

* * {% codeBlock src='datetimepicker/keyConfigs/index.md' %}{% endcodeBlock %} * * @default null */ keyConfigs?: { [key: string]: string }; /** * You can add the additional html attributes such as disabled, value etc., to the element. * If you configured both property and equivalent html attribute then the component considers the property value. * {% codeBlock src='datetimepicker/htmlAttributes/index.md' %}{% endcodeBlock %} * * @default {} */ htmlAttributes?: { [key: string]: string }; /**      * Enable or disable persisting component's state between page reloads. If enabled, following list of states will be persisted. * 1. value *      * @default false      */ enablePersistence?: boolean; /** * > Support for `allowEdit` has been provided from * [`v16.2.46`](https://ej2.syncfusion.com/angular/documentation/release-notes/16.2.46/#datetimepicker). * * Specifies whether the input textbox is editable or not. Here the user can select the value from the * popup and cannot edit in the input textbox. * * @default true */ allowEdit?: boolean; /** * Specifies the option to enable the multiple dates selection of the calendar. * * @default false * @private */ isMultiSelection?: boolean; /** * Gets or sets multiple selected dates of the calendar. * * @default null * @private */ values?: Date[]; /** * Specifies whether to show or hide the clear icon in textbox. * * @default true */ showClearButton?: boolean; /** * Specifies the placeholder text that to be is displayed in textbox. * * @default null */ placeholder?: string; /** * Specifies the component to act as strict. So that, it allows to enter only a valid * date and time value within a specified range or else it * will resets to previous value. By default, strictMode is in false. * it allows invalid or out-of-range value with highlighted error class. * * @default false * > For more details refer to * [`Strict Mode`](../../datetimepicker/strict-mode/) documentation. */ strictMode?: boolean; /** * Specifies the component popup display full screen in mobile devices. * * @default false */ fullScreenMode?: boolean; /** * By default, the date value will be processed based on system time zone. * If you want to process the initial date value using server time zone * then specify the time zone value to `serverTimezoneOffset` property. * * @default null */ serverTimezoneOffset?: number; /** * Gets or sets the minimum date that can be selected in the DateTimePicker. * * @default new Date(1900, 00, 01) */ min?: Date; /** * Gets or sets the maximum date that can be selected in the DateTimePicker. * * @default new Date(2099, 11, 31) */ max?: Date; /** * Gets or sets the minimum time that can be selected in the time popup of the DateTimePicker. * * @default null */ minTime?: Date; /** * Gets or sets the maximum time that can be selected in the time popup of the DateTimePicker. * * @default null */ maxTime?: Date; /** * Gets or sets the Calendar's first day of the week. By default, the first day of the week will be based on the current culture. * * @default 0 * @aspType int * > For more details about firstDayOfWeek refer to * [`First day of week`](../../calendar/how-to/first-day-of-week#change-the-first-day-of-the-week) documentation. */ firstDayOfWeek?: number; /** * Gets or sets the Calendar's Type like gregorian or islamic. * * @default Gregorian */ calendarMode?: CalendarType; /** * Specifies the initial view of the Calendar when it is opened. * With the help of this property, initial view can be changed to year or decade view. * * @default Month * * * * * * * * * * *

* View	* Description
* Month	* Calendar view shows the days of the month.
* Year	* Calendar view shows the months of the year.
* Decade	* Calendar view shows the years of the decade.

* * > For more details about start refer to * [`calendarView`](../../calendar/calendar-views#view-restriction)documentation. */ start?: CalendarView; /** * Sets the maximum level of view such as month, year, and decade in the Calendar. * Depth view should be smaller than the start view to restrict its view navigation. * * @default Month * * * * * * * * * * *

* view	* Description
* Month	* Calendar view shows up to the days of the month.
* Year	* Calendar view shows up to the months of the year.
* Decade	* Calendar view shows up to the years of the decade.

* * > For more details about depth refer to * [`calendarView`](../../calendar/calendar-views#view-restriction)documentation. */ depth?: CalendarView; /** * Determines whether the week number of the year is to be displayed in the calendar or not. * * @default false * > For more details about weekNumber refer to * [`Calendar with week number`](../../calendar/how-to/render-the-calendar-with-week-numbers)documentation. */ weekNumber?: boolean; /**      * Specifies whether the today button is to be displayed or not. *      * @default true      */ showTodayButton?: boolean; /** * Specifies the format of the day that to be displayed in header. By default, the format is ‘short’. * Possible formats are: * * `Short` - Sets the short format of day name (like Su ) in day header. * * `Narrow` - Sets the single character of day name (like S ) in day header. * * `Abbreviated` - Sets the min format of day name (like Sun ) in day header. * * `Wide` - Sets the long format of day name (like Sunday ) in day header. * * @default Short */ dayHeaderFormat?: DayHeaderFormats; /** * By default, the popup opens while clicking on the datetimepicker icon. * If you want to open the popup while focusing the datetime input then specify its value as true. * * @default false */ openOnFocus?: boolean; /** * Specifies whether it is a masked datetimepicker or not. * By default the datetimepicker component render without masked input. * If you need masked datetimepicker input then specify it as true. * * @default false */ enableMask?: boolean; /** * Specifies the mask placeholder to be displayed on masked datetimepicker. * * @default {day:'day' , month:'month', year: 'year', hour:'hour',minute:'minute',second:'second',dayOfTheWeek: 'day of the week'} */ maskPlaceholder?: MaskPlaceholderModel; /** * Triggers when popup is opened. * * @event open */ open?: EmitType