Class DateTimePicker

packages/main/src/DateTimePicker.ts:118–529

* @class * * ### Overview * The `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds) * and for the purpose it consists of input field and Date/Time picker. * * ### Usage * * Use the `DateTimePicker` if you need a combined date

 * @public
 */
@customElement({
	tag: "ui5-datetime-picker",
	template: DateTimePickerTemplate,
	styles: [
		DatePicker.styles,
		DateTimePickerCss,
		DateTimePickerPopoverCss,
	],
})
class DateTimePicker extends DatePicker implements IFormInputElement {
	/**
	 * Defines the visibility of the time view in `phoneMode`.
	 * For more information, see the `phoneMode` property.
	 *
	 * **Note:** The date view would be displayed by default.
	 * @default false
	 * @private
	 */
	@property({ type: Boolean, noAttribute: true })
	_showTimeView = false

	/**
	 * Defines if the `DateTimePicker` should be displayed in phone mode.
	 * The phone mode turns on when the component is used on small screens or phone devices.
	 * In phone mode the user can see either the calendar view, or the time view
	 * and can switch between the views via toggle buttons.
	 * @default false
	 * @private
	 */
	@property({ type: Boolean })
	_phoneMode = false;

	/**
	 * Selected, but not yet confirmed date/time
	 * @private
	 */
	@property({ type: Object })
	_previewValues: PreviewValues = {};

	/**
	 * Stores the last valid value to preserve time when entering invalid values
	 * @private
	 */
	_lastValidValue = "";

	@query("[ui5-time-selection-clocks]")
	_clocks!: TimeSelectionClocks;

	_handleResizeBound: ResizeObserverCallback;

	constructor() {
		super();
		this._handleResizeBound = this._handleResize.bind(this);
	}

	/**
	 * @override
	 */