inviton-powerduck 0.0.153 → 0.0.155

package/components/input/daterange-picker.tsx

@@ -3,7 +3,6 @@ import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper'
 import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
-import { DateWrapper } from '../../common/date-wrapper';
 import DateUtils from '../../common/utils/date-utils';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
 import { PortalUtils } from '../../common/utils/utils';
@@ -11,546 +10,528 @@ import FormItemWrapper from '../form/form-item-wrapper';
 import DateInputHelper from './ts/dateInputHelper';
 import './plugins/daterangepicker/jquery.daterangepicker';
 import './css/daterange-picker.css';
+import { Temporal } from '@js-temporal/polyfill';
+import TemporalUtils from '../../common/utils/temporal-utils';
+import { utcEpochMilliseconds } from '../../common/extensions/temporal-extensions';
 
 export interface DaterangePickerArgsCustomCellRenderArgs {
-	attributesHtml: string;
-	attributes: { [index: string]: string };
-	day: DaterangePickerArgsCustomCellRenderDay;
+    attributesHtml: string;
+    attributes: { [index: string]: string };
+    day: DaterangePickerArgsCustomCellRenderDay;
 }
 
 export interface DaterangePickerArgsCustomCellRenderDay {
-	date: Date;
-	day: number;
-	extraClass: string;
-	time: number;
-	tooltip: string;
-	type: 'toMonth' | 'nextMonth' | 'lastMonth';
-	valid: boolean;
+    date: Date;
+    day: number;
+    extraClass: string;
+    time: number;
+    tooltip: string;
+    type: 'toMonth' | 'nextMonth' | 'lastMonth';
+    valid: boolean;
 }
 
 interface DaterangePickerArgs extends FormItemWrapperArgs {
-	value?: DaterangeChangedArgs;
-	placeholder?: string;
-	format?: string;
-	enableTime?: boolean;
-	autoClose?: boolean;
-	separator?: string;
-	inputReadOnly?: boolean;
-	minDate?: DateWrapper;
-	alwaysOpen?: boolean;
-	singleDate?: boolean;
-	maxDate?: DateWrapper;
-	prevIcon?: string;
-	nextIcon?: string;
-	hideYearInMonthName?: boolean;
-	singleMonth?: boolean;
-	calendarPlacement?: 'body' | 'inline' | 'input-container-leftalign' | 'input-container-rightalign';
-	ensureMonthContinuity?: boolean;
-	customInputText?: () => string;
-	customTooltip?: (dayCount: number) => string;
-	maxDays?: number;
-	maxDaysTooltip?: (maxDays: number) => string;
-	getCellHtml?: (args: DaterangePickerArgsCustomCellRenderArgs) => string;
-	changed?: (newValue: DaterangeChangedArgs) => void;
-	showCustomClearButton?: boolean;
+    value?: DaterangeChangedArgs;
+    placeholder?: string;
+    format?: string;
+    enableTime?: boolean;
+    autoClose?: boolean;
+    separator?: string;
+    inputReadOnly?: boolean;
+    minDate?: Temporal.PlainDateTime;
+    alwaysOpen?: boolean;
+    singleDate?: boolean;
+    maxDate?: Temporal.PlainDateTime;
+    prevIcon?: string;
+    nextIcon?: string;
+    hideYearInMonthName?: boolean;
+    singleMonth?: boolean;
+    calendarPlacement?: 'body' | 'inline' | 'input-container-leftalign' | 'input-container-rightalign';
+    ensureMonthContinuity?: boolean;
+    customInputText?: () => string;
+    customTooltip?: (dayCount: number) => string;
+    maxDays?: number;
+    maxDaysTooltip?: (maxDays: number) => string;
+    getCellHtml?: (args: DaterangePickerArgsCustomCellRenderArgs) => string;
+    changed?: (newValue: DaterangeChangedArgs) => void;
+    showCustomClearButton?: boolean;
 }
 
 export interface DaterangeChangedArgs {
-	startTime: DateWrapper;
-	endTime: DateWrapper;
+    startTime: Temporal.PlainDateTime;
+    endTime: Temporal.PlainDateTime;
 }
 
 const DATE_FORMAT_FOR_RANGE_PICKER = (() => {
-	const dummyDate = new Date(Date.UTC(
-		2022,
-		11,
-		20,
-	));
-	const formatted = dummyDate.toLocaleDateString(PowerduckState.getCurrentLanguage(), {
-		day: '2-digit',
-		month: '2-digit',
-		year: 'numeric',
-		timeZone: 'UTC',
-	});
-
-	return formatted.replace('20', 'dd').replace('12', 'MM').replace('2022', 'yyyy');
+    const dummyDate = new Date(Date.UTC(
+        2022,
+        11,
+        20,
+    ));
+    const formatted = dummyDate.toLocaleDateString(PowerduckState.getCurrentLanguage(), {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        timeZone: 'UTC',
+    });
+
+    return formatted.replace('20', 'dd').replace('12', 'MM').replace('2022', 'yyyy');
 })();
 
 const DATE_FORMAT_FOR_RANGE_PICKER_WITH_TIME = `${DATE_FORMAT_FOR_RANGE_PICKER.split('. ').join('.')} HH:mm`;
 
 @Component
 class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> implements DaterangePickerArgs {
-	@Prop() label!: string;
-	@Prop() labelButtons!: DropdownButtonItemArgs[];
-	@Prop() cssClass!: string;
-	@Prop() subtitle!: string;
-	@Prop() value!: DaterangeChangedArgs;
-	@Prop() placeholder!: string;
-	@Prop() mandatory!: boolean;
-	@Prop() customInputText?: () => string;
-	@Prop() inputReadOnly?: boolean;
-	@Prop() alwaysOpen!: boolean;
-	@Prop() singleDate!: boolean;
-	@Prop() wrap!: boolean;
-	@Prop() hint: string;
-	@Prop() appendIcon: string;
-	@Prop() prependIcon: string;
-	@Prop() getCellHtml?: (args: DaterangePickerArgsCustomCellRenderArgs) => string;
-	@Prop() appendClicked: () => void;
-	@Prop() prependClicked: () => void;
-	@Prop() prependIconClicked: () => void;
-	@Prop() appendIconClicked: () => void;
-	@Prop() marginType?: MarginType;
-	@Prop() calendarPlacement?: 'body' | 'inline' | 'input-container-leftalign' | 'input-container-rightalign';
-	@Prop() changed: (newValue: DaterangeChangedArgs) => void;
-	@Prop() format?: string;
-	@Prop() showClearValueButton!: boolean;
-	@Prop() autoClose?: boolean;
-	@Prop() enableTime?: boolean;
-	@Prop() separator?: string;
-	@Prop() singleMonth?: boolean;
-	@Prop() minDate?: DateWrapper;
-	@Prop() maxDate?: DateWrapper;
-	@Prop() prevIcon?: string;
-	@Prop() nextIcon?: string;
-	@Prop() hideYearInMonthName?: boolean;
-	@Prop() disabled!: boolean;
-	@Prop() readOnly?: boolean;
-	@Prop() customTooltip?: (dayCount: number) => string;
-	@Prop() maxDays?: number;
-	@Prop() maxDaysTooltip?: (maxDays: number) => string;
-	@Prop() ensureMonthContinuity?: boolean;
-
-	_startDate: DateWrapper;
-	_endDate: DateWrapper;
-	_changed: boolean;
-	_lastText: string;
-	_opened: boolean = false;
-
-	raiseChangedEvent() {
-		if (this._changed && this.changed != null) {
-			this._lastText = this.getCurrentInputValue();
-			if (isNullOrEmpty(this._lastText)) {
-				this.changed(null);
-				return;
-			}
-
-			this.changed({
-				startTime: this._startDate,
-				endTime: this._endDate,
-			});
-		}
-	}
-
-	beforeMount() {
-		this.handleModelValueChange();
-	}
-
-	beforeUnmount() {
-		try {
-			this.getInputElement().data('dateRangePicker').destroy();
-		} catch (error) { }
-	}
-
-	mounted() {
-		const self = this;
-		const $elem = this.getInputElement();
-		const now = new DateWrapper();
-
-		($elem as any).dateRangePicker({
-			singleMonth: this.singleMonth == true,
-			alwaysOpen: this.alwaysOpen == true,
-			singleDate: this.singleDate == true,
-			startOfWeek: DateInputHelper.getStartOfWeek() == 0 ? 'sunday' : 'monday',
-			separator: self.getSeparator(),
-			hideYearInMonthName: this.hideYearInMonthName == true,
-			format: self.getFormat(),
-			language: self.getLanguage(),
-			autoClose: self.autoClose,
-			ensureMonthContinuity: self.ensureMonthContinuity,
-			maxDays: this.maxDays,
-			getCellHtml: this.getCellHtml,
-			maxDaysTooltip: this.maxDaysTooltip,
-			calendarPlacement: this.calendarPlacement,
-			container: (this.calendarPlacement == null || this.calendarPlacement == 'body') ? 'body' : $elem.parent(),
-			displayMode: () => {
-				if (PortalUtils.treatAsMobileDevice() && this.alwaysOpen != true) {
-					return 'modal';
-				}
-
-				return 'below-input';
-			},
-			leftOffset: () => {
-				if (this.prependIcon == null) {
-					return 0;
-				} else {
-					return $elem.closest('.input-group').find('.input-group-text.prepend-icon')[0].clientWidth;
-				}
-			},
-			time: {
-				enabled: self.enableTime,
-			},
-			hoveringTooltip: this.customTooltip == null ? null : days => self.customTooltip(days),
-			startDate: self.minDate,
-			endDate: self.maxDate,
-			customArrowPrevSymbol: self.getPrevSymbol(),
-			customArrowNextSymbol: self.getNextSymbol(),
-			setValue(
-				this: any,
-				dateRange,
-				dateStart,
-				dateEnd,
-			) {
-				if (!$(this).attr('readonly') && !$(this).is(':disabled') && dateRange != $(this).val()) {
-					$(this).val(dateRange);
-				}
-
-				self.syncInputWithValues.call(self, dateRange);
-			},
-			defaultTime: new DateWrapper(
-				now.getFullYear(),
-				now.getMonth(),
-				now.getDate(),
-			),
-			defaultEndTime: new DateWrapper(
-				now.getFullYear(),
-				now.getMonth(),
-				now.getDate(),
-				23,
-				59,
-				59,
-			),
-			start: this.value?.startTime?.getTime(),
-			end: this.value?.endTime?.getTime(),
-		}).bind('datepicker-open', () => {
-			self._changed = false;
-			self._opened = true;
-		}).bind('datepicker-change', (event, obj) => {
-			self._startDate = obj.date1;
-			self._endDate = obj.date2 || obj.date1;
-			self._changed = true;
-
-			if (this.alwaysOpen) {
-				self.raiseChangedEvent();
-			}
-		}).bind('datepicker-closed', () => {
-			const val = $elem.val() as string;
-			if (isNullOrEmpty(val)) {
-				if (self._startDate != null) {
-					self._startDate = null;
-					self._changed = true;
-				}
-
-				if (self._endDate != null) {
-					self._endDate = null;
-					self._changed = true;
-				}
-			}
-
-			self._opened = false;
-			self.raiseChangedEvent();
-		});
-	}
-
-	beforeUpdate() {
-		this.handleModelValueChange();
-	}
-
-	handleModelValueChange() {
-		if (this.value?.endTime && this.value?.startTime) {
-			if (this.enableTime) {
-				const sd = this.value.startTime;
-				const startDate = new DateWrapper(
-					sd.getFullYear(),
-					sd.getMonth(),
-					sd.getDate(),
-					sd.getHours(),
-					sd.getMinutes(),
-					sd.getSeconds(),
-				);
-
-				const ed = this.value.endTime;
-				const endDate = new DateWrapper(
-					ed.getFullYear(),
-					ed.getMonth(),
-					ed.getDate(),
-					ed.getHours(),
-					ed.getMinutes(),
-					ed.getSeconds(),
-				);
-
-				this.syncInputDefaultValue(startDate.toISOString(), endDate.toISOString());
-			} else {
-				this.syncInputDefaultValue(this.value.startTime.innerDate.toISOString(), this.value.endTime.innerDate.toISOString());
-			}
-
-			this.$nextTick(() => {
-				this.writeCustomText();
-			});
-		}
-	}
-
-	handleModalOpenClick(e: any): void {
-		setTimeout(() => {
-			this.$nextTick(() => {
-				this.getInputElement().data('dateRangePicker').ensurePickerOpen();
-			});
-		}, 0);
-	}
-
-	isOpened(): boolean {
-		return this._opened;
-	}
-
-	open(ms?: number): void {
-		const $elem = this.getInputElement();
-
-		setTimeout(() => {
-			this.$nextTick(() => {
-				$elem.data('dateRangePicker').open(ms);
-			});
-		}, 0);
-	}
-
-	close(ms?: number): void {
-		const $elem = this.getInputElement();
-
-		setTimeout(() => {
-			this.$nextTick(() => {
-				$elem.data('dateRangePicker').close(ms);
-			});
-		}, 0);
-	}
-
-	toggle(ms?: number): void {
-		const isOpened = this._opened;
-
-		if (isOpened) {
-			this.close(ms);
-		} else {
-			this.open(ms);
-		}
-	}
-
-	getPrevSymbol(): string {
-		if (this.prevIcon != null) {
-			return `<i class="${this.prevIcon}"></i>`;
-		}
-	}
-
-	getNextSymbol(): string {
-		if (this.nextIcon != null) {
-			return `<i class="${this.nextIcon}"></i>`;
-		}
-	}
-
-	getIsSingleDate(): boolean {
-		return this.singleDate == true;
-	}
-
-	getInputElement(): JQuery {
-		return $(this.$refs.innerInput as any);
-	}
-
-	getRangeText(e: DaterangeChangedArgs) {
-		return this._lastText;
-
-		if (e == null) {
-			return null;
-		}
-	}
-
-	getLanguage(): string {
-		let lang = DateInputHelper.getLocale();
-		if (lang == 'cs') {
-			lang = 'cz';
-		}
-
-		return lang;
-	}
-
-	getFormat(): string {
-		if (this.format) {
-			return this.format;
-		}
-
-		if (this.enableTime != true) {
-			return DATE_FORMAT_FOR_RANGE_PICKER;
-		} else {
-			return DATE_FORMAT_FOR_RANGE_PICKER_WITH_TIME;
-		}
-	}
-
-	getSeparator(): string {
-		return this.separator ?? ' ~ ';
-	}
-
-	getDateFromString(dateStr: string): DateWrapper {
-		if (isNullOrEmpty(dateStr?.trim())) {
-			return null;
-		}
-
-		try {
-			const retVal = DateUtils.getDateWrapperFromFormat(dateStr, this.getFormat());
-			if (retVal != null) {
-				return retVal;
-			}
-		} catch (e1) { }
-
-		try {
-			return DateWrapper.fromWire(dateStr.trim());
-		} catch (e2) {
-			try {
-				return new DateWrapper(dateStr.trim() as any);
-			} catch (e3) {
-				return DateWrapper.getCurrent();
-			}
-		}
-	}
-
-	syncInputDefaultValue (dateStart?: string, dateEnd?: string) {
-		const startDate = this.getDateFromString(dateStart);
-		if (startDate?.getTime() != this._startDate?.getTime()) {
-			this._startDate = startDate;
-		}
-
-		const endDate = this.getDateFromString(dateEnd);
-		if (endDate != this._endDate) {
-			this._endDate = endDate;
-
-			if (this._endDate == null) {
-				this._endDate = this._startDate;
-			}
-		}
-
-		const getInputValue = (): string => {
-			const formattedStartDate = DateUtils.formatDate(startDate, this.getFormat());
-			if (this.singleDate) {
-				return formattedStartDate;
-			}
-
-			return formattedStartDate + this.getSeparator() + DateUtils.formatDate(endDate, this.getFormat());
-		}
-
-		const inputValue = getInputValue();
-		this._lastText = inputValue;
-		this.writeCustomText();
-	}
-
-	syncInputWithValues(
-		dateRange?: string,
-		dateStart?: string,
-		dateEnd?: string,
-	) {
-		if (isNullOrEmpty(dateStart) || isNullOrEmpty(dateEnd)) {
-			const __default_string: string = dateRange || this.getInputElement().val() as string;
-			const defaults = __default_string ? __default_string.split(this.getSeparator()) : [];
-
-			if (defaults && ((defaults.length == 1 && this.getIsSingleDate()) || defaults.length >= 2)) {
-				let ___format = this.getFormat();
-				if (___format.match(/Do/)) {
-					___format = ___format.replace(/Do/, 'D');
-					defaults[0] = defaults[0].replace(/(\d+)(th|nd|st)/, '$1');
-					if (defaults.length >= 2) {
-						defaults[1] = defaults[1].replace(/(\d+)(th|nd|st)/, '$1');
-					}
-				}
-
-				dateStart = defaults[0];
-				dateEnd = defaults[1];
-			}
-		}
-
-		const startDate = this.getDateFromString(dateStart);
-		if (startDate != this._startDate) {
-			this._startDate = startDate;
-			this._changed = true;
-		}
-
-		const endDate = this.getDateFromString(dateEnd);
-		if (endDate != this._endDate) {
-			this._endDate = endDate;
-			this._changed = true;
-		}
-
-		this.writeCustomText();
-	}
-
-	writeCustomText(): void {
-		if (this.customInputText != null) {
-			this.getInputElement().parent().attr('data-customtext', (this.customInputText() || ''));
-		}
-	}
-
-	getCssClass(): string {
-		return `daterange-picker-input${this.customInputText != null ? ' daterange-picker-input-customtext' : ''}${PortalUtils.treatAsMobileDevice() ? ' pd-daterange-picker-modal-mode' : ''} ${this.cssClass ?? ''}${this.prependIcon != null ? ' input-group-prepend-icon' : ''}${this.appendIcon != null ? ' input-group-append-icon' : ''}`;
-	}
-
-	getCurrentInputValue(): string {
-		return $(this.$el).find('input').val() as any; // TODO: Implement
-	}
-
-	inputValueChanged(): void {
-		this.$nextTick(() => {
-			setTimeout(() => {
-				const currentVal = this.getCurrentInputValue();
-				if (currentVal != this._lastText) {
-					if (isNullOrEmpty(currentVal)) {
-						this._lastText = currentVal;
-						this.changed(null);
-					}
-				}
-			}, 10);
-		});
-	}
-
-	shouldAddModalClick() {
-		if (!PortalUtils.treatAsMobileDevice()) {
-			return false;
-		}
-
-		if (this.calendarPlacement == 'input-container-leftalign' || this.calendarPlacement == 'input-container-rightalign') {
-			return false;
-		}
-
-		return true;
-	}
-
-	clearValue() {
-		this._startDate = null;
-		this._endDate = null;
-		this._lastText = null;
-		this._changed = true;
-		this.getInputElement().val('');
-		this.inputValueChanged();
-	}
-
-	render(h) {
-		return (
-			<FormItemWrapper label={this.label} cssClass={this.getCssClass()} mandatory={this.mandatory} wrap={this.wrap} appendIcon={this.appendIcon} prependIcon={this.prependIcon} hint={this.hint} marginType={this.marginType} appendClicked={this.appendClicked} prependClicked={this.prependClicked} prependIconClicked={this.prependIconClicked} appendIconClicked={this.appendIconClicked} validationState={this.validationState} labelButtons={this.labelButtons} subtitle={this.subtitle}>
-				{this.shouldAddModalClick()
-				&& <div class="pd-daterange-picker-modalclick" onClick={(e) => { this.handleModalOpenClick(e); }}></div>}
-
-				<div style="position: relative; display: flex; align-items: center; flex-grow:1">
-					{' '}
-					{/* Added a wrapper for input and clear button */}
-					<input
-						type="text"
-						ref="innerInput"
-						disabled={this.disabled as any != true ? null : 'disabled'}
-						readonly={this.readOnly as any != true ? null : 'readonly'}
-						value={this.getRangeText(this.value)}
-						class={PowerduckState.getFormControlCssClass()}
-						placeholder={this.placeholder}
-						onChange={() => { this.inputValueChanged(); }}
-					/>
-					{this.showClearValueButton && this._startDate && (
-						<span class="pd-daterange-picker-clear-button" onClick={() => this.clearValue()}>×</span>
-					)}
-				</div>
-			</FormItemWrapper>
-		);
-	}
+    @Prop() label!: string;
+    @Prop() labelButtons!: DropdownButtonItemArgs[];
+    @Prop() cssClass!: string;
+    @Prop() subtitle!: string;
+    @Prop() value!: DaterangeChangedArgs;
+    @Prop() placeholder!: string;
+    @Prop() mandatory!: boolean;
+    @Prop() customInputText?: () => string;
+    @Prop() inputReadOnly?: boolean;
+    @Prop() alwaysOpen!: boolean;
+    @Prop() singleDate!: boolean;
+    @Prop() wrap!: boolean;
+    @Prop() hint: string;
+    @Prop() appendIcon: string;
+    @Prop() prependIcon: string;
+    @Prop() getCellHtml?: (args: DaterangePickerArgsCustomCellRenderArgs) => string;
+    @Prop() appendClicked: () => void;
+    @Prop() prependClicked: () => void;
+    @Prop() prependIconClicked: () => void;
+    @Prop() appendIconClicked: () => void;
+    @Prop() marginType?: MarginType;
+    @Prop() calendarPlacement?: 'body' | 'inline' | 'input-container-leftalign' | 'input-container-rightalign';
+    @Prop() changed: (newValue: DaterangeChangedArgs) => void;
+    @Prop() format?: string;
+    @Prop() showClearValueButton!: boolean;
+    @Prop() autoClose?: boolean;
+    @Prop() enableTime?: boolean;
+    @Prop() separator?: string;
+    @Prop() singleMonth?: boolean;
+    @Prop() minDate?: Temporal.PlainDateTime;
+    @Prop() maxDate?: Temporal.PlainDateTime;
+    @Prop() prevIcon?: string;
+    @Prop() nextIcon?: string;
+    @Prop() hideYearInMonthName?: boolean;
+    @Prop() disabled!: boolean;
+    @Prop() readOnly?: boolean;
+    @Prop() customTooltip?: (dayCount: number) => string;
+    @Prop() maxDays?: number;
+    @Prop() maxDaysTooltip?: (maxDays: number) => string;
+    @Prop() ensureMonthContinuity?: boolean;
+
+    _startDate: Temporal.PlainDateTime;
+    _endDate: Temporal.PlainDateTime;
+    _changed: boolean;
+    _lastText: string;
+    _opened: boolean = false;
+
+    raiseChangedEvent() {
+        if (this._changed && this.changed != null) {
+            this._lastText = this.getCurrentInputValue();
+            if (isNullOrEmpty(this._lastText)) {
+                this.changed(null);
+                return;
+            }
+
+            this.changed({
+                startTime: this._startDate,
+                endTime: this._endDate,
+            });
+        }
+    }
+
+    beforeMount() {
+        this.handleModelValueChange();
+    }
+
+    beforeUnmount() {
+        try {
+            this.getInputElement().data('dateRangePicker').destroy();
+        } catch (error) { }
+    }
+
+    mounted() {
+        const self = this;
+        const $elem = this.getInputElement();
+        const now = Temporal.Now.plainDateTimeISO();
+
+        ($elem as any).dateRangePicker({
+            singleMonth: this.singleMonth == true,
+            alwaysOpen: this.alwaysOpen == true,
+            singleDate: this.singleDate == true,
+            startOfWeek: DateInputHelper.getStartOfWeek() == 0 ? 'sunday' : 'monday',
+            separator: self.getSeparator(),
+            hideYearInMonthName: this.hideYearInMonthName == true,
+            format: self.getFormat(),
+            language: self.getLanguage(),
+            autoClose: self.autoClose,
+            ensureMonthContinuity: self.ensureMonthContinuity,
+            maxDays: this.maxDays,
+            getCellHtml: this.getCellHtml,
+            maxDaysTooltip: this.maxDaysTooltip,
+            calendarPlacement: this.calendarPlacement,
+            container: (this.calendarPlacement == null || this.calendarPlacement == 'body') ? 'body' : $elem.parent(),
+            displayMode: () => {
+                if (PortalUtils.treatAsMobileDevice() && this.alwaysOpen != true) {
+                    return 'modal';
+                }
+
+                return 'below-input';
+            },
+            leftOffset: () => {
+                if (this.prependIcon == null) {
+                    return 0;
+                } else {
+                    return $elem.closest('.input-group').find('.input-group-text.prepend-icon')[0].clientWidth;
+                }
+            },
+            time: {
+                enabled: self.enableTime,
+            },
+            hoveringTooltip: this.customTooltip == null ? null : days => self.customTooltip(days),
+            startDate: self.minDate,
+            endDate: self.maxDate,
+            customArrowPrevSymbol: self.getPrevSymbol(),
+            customArrowNextSymbol: self.getNextSymbol(),
+            setValue(
+                this: any,
+                dateRange,
+                dateStart,
+                dateEnd,
+            ) {
+                if (!$(this).attr('readonly') && !$(this).is(':disabled') && dateRange != $(this).val()) {
+                    $(this).val(dateRange);
+                }
+
+                self.syncInputWithValues.call(self, dateRange);
+            },
+            defaultTime: Temporal.PlainDateTime.from({
+                year: now.year,
+                month: now.month,
+                day: now.day,
+            }),
+            defaultEndTime:Temporal.PlainDateTime.from({
+                year: now.year,
+                month: now.month,
+                day: now.day,
+                hour: 23,
+                minute: 59,
+                second: 59
+            }),
+            start: this.value?.startTime,
+            end: this.value?.endTime,
+        }).bind('datepicker-open', () => {
+            self._changed = false;
+            self._opened = true;
+        }).bind('datepicker-change', (event, obj) => {
+            self._startDate = obj.date1;
+            self._endDate = obj.date2 || obj.date1;
+            self._changed = true;
+
+            if (this.alwaysOpen) {
+                self.raiseChangedEvent();
+            }
+        }).bind('datepicker-closed', () => {
+            const val = $elem.val() as string;
+            if (isNullOrEmpty(val)) {
+                if (self._startDate != null) {
+                    self._startDate = null;
+                    self._changed = true;
+                }
+
+                if (self._endDate != null) {
+                    self._endDate = null;
+                    self._changed = true;
+                }
+            }
+
+            self._opened = false;
+            self.raiseChangedEvent();
+        });
+    }
+
+    beforeUpdate() {
+        this.handleModelValueChange();
+    }
+
+    handleModelValueChange() {
+        if (this.value?.endTime && this.value?.startTime) {
+            if (this.enableTime) {
+                const startDate = this.value.startTime;
+                const endDate = this.value.endTime;
+
+                this.syncInputDefaultValue(startDate.toString(), endDate.toString());
+            } else {
+                this.syncInputDefaultValue(this.value.startTime.toString(), this.value.endTime.toString());
+            }
+
+            this.$nextTick(() => {
+                this.writeCustomText();
+            });
+        }
+    }
+
+    handleModalOpenClick(e: any): void {
+        setTimeout(() => {
+            this.$nextTick(() => {
+                this.getInputElement().data('dateRangePicker').ensurePickerOpen();
+            });
+        }, 0);
+    }
+
+    isOpened(): boolean {
+        return this._opened;
+    }
+
+    open(ms?: number): void {
+        const $elem = this.getInputElement();
+
+        setTimeout(() => {
+            this.$nextTick(() => {
+                $elem.data('dateRangePicker').open(ms);
+            });
+        }, 0);
+    }
+
+    close(ms?: number): void {
+        const $elem = this.getInputElement();
+
+        setTimeout(() => {
+            this.$nextTick(() => {
+                $elem.data('dateRangePicker').close(ms);
+            });
+        }, 0);
+    }
+
+    toggle(ms?: number): void {
+        const isOpened = this._opened;
+
+        if (isOpened) {
+            this.close(ms);
+        } else {
+            this.open(ms);
+        }
+    }
+
+    getPrevSymbol(): string {
+        if (this.prevIcon != null) {
+            return `<i class="${this.prevIcon}"></i>`;
+        }
+    }
+
+    getNextSymbol(): string {
+        if (this.nextIcon != null) {
+            return `<i class="${this.nextIcon}"></i>`;
+        }
+    }
+
+    getIsSingleDate(): boolean {
+        return this.singleDate == true;
+    }
+
+    getInputElement(): JQuery {
+        return $(this.$refs.innerInput as any);
+    }
+
+    getRangeText(e: DaterangeChangedArgs) {
+        return this._lastText;
+
+        if (e == null) {
+            return null;
+        }
+    }
+
+    getLanguage(): string {
+        let lang = DateInputHelper.getLocale();
+        if (lang == 'cs') {
+            lang = 'cz';
+        }
+
+        return lang;
+    }
+
+    getFormat(): string {
+        if (this.format) {
+            return this.format;
+        }
+
+        if (this.enableTime != true) {
+            return DATE_FORMAT_FOR_RANGE_PICKER;
+        } else {
+            return DATE_FORMAT_FOR_RANGE_PICKER_WITH_TIME;
+        }
+    }
+
+    getSeparator(): string {
+        return this.separator ?? ' ~ ';
+    }
+
+    getDateFromString(dateStr: string): Temporal.PlainDateTime {
+        if (isNullOrEmpty(dateStr?.trim())) {
+            return null;
+        }
+
+        try {
+            const retVal = DateUtils.getTemporalFromFormat(dateStr, this.getFormat());
+            if (retVal != null) {
+                return retVal;
+            }
+        } catch (e1) { }
+
+        try {
+            return TemporalUtils.fromString(dateStr.trim());
+        } catch (e2) {
+            return Temporal.Now.plainDateTimeISO();
+        }
+    }
+
+    syncInputDefaultValue(dateStart?: string, dateEnd?: string) {
+        const startDate = this.getDateFromString(dateStart);
+        if (startDate?.[utcEpochMilliseconds]() != this._startDate?.[utcEpochMilliseconds]()) {
+            this._startDate = startDate;
+        }
+
+        const endDate = this.getDateFromString(dateEnd);
+        if (endDate != this._endDate) {
+            this._endDate = endDate;
+
+            if (this._endDate == null) {
+                this._endDate = this._startDate;
+            }
+        }
+
+        const getInputValue = (): string => {
+            const formattedStartDate = DateUtils.formatDate(startDate, this.getFormat());
+            if (this.singleDate) {
+                return formattedStartDate;
+            }
+
+            return formattedStartDate + this.getSeparator() + DateUtils.formatDate(endDate, this.getFormat());
+        }
+
+        const inputValue = getInputValue();
+        this._lastText = inputValue;
+        this.writeCustomText();
+    }
+
+    syncInputWithValues(
+        dateRange?: string,
+        dateStart?: string,
+        dateEnd?: string,
+    ) {
+        if (isNullOrEmpty(dateStart) || isNullOrEmpty(dateEnd)) {
+            const __default_string: string = dateRange || this.getInputElement().val() as string;
+            const defaults = __default_string ? __default_string.split(this.getSeparator()) : [];
+
+            if (defaults && ((defaults.length == 1 && this.getIsSingleDate()) || defaults.length >= 2)) {
+                let ___format = this.getFormat();
+                if (___format.match(/Do/)) {
+                    ___format = ___format.replace(/Do/, 'D');
+                    defaults[0] = defaults[0].replace(/(\d+)(th|nd|st)/, '$1');
+                    if (defaults.length >= 2) {
+                        defaults[1] = defaults[1].replace(/(\d+)(th|nd|st)/, '$1');
+                    }
+                }
+
+                dateStart = defaults[0];
+                dateEnd = defaults[1];
+            }
+        }
+
+        const startDate = this.getDateFromString(dateStart);
+        if (startDate != this._startDate) {
+            this._startDate = startDate;
+            this._changed = true;
+        }
+
+        const endDate = this.getDateFromString(dateEnd);
+        if (endDate != this._endDate) {
+            this._endDate = endDate;
+            this._changed = true;
+        }
+
+        this.writeCustomText();
+    }
+
+    writeCustomText(): void {
+        if (this.customInputText != null) {
+            this.getInputElement().parent().attr('data-customtext', (this.customInputText() || ''));
+        }
+    }
+
+    getCssClass(): string {
+        return `daterange-picker-input${this.customInputText != null ? ' daterange-picker-input-customtext' : ''}${PortalUtils.treatAsMobileDevice() ? ' pd-daterange-picker-modal-mode' : ''} ${this.cssClass ?? ''}${this.prependIcon != null ? ' input-group-prepend-icon' : ''}${this.appendIcon != null ? ' input-group-append-icon' : ''}`;
+    }
+
+    getCurrentInputValue(): string {
+        return $(this.$el).find('input').val() as any; // TODO: Implement
+    }
+
+    inputValueChanged(): void {
+        this.$nextTick(() => {
+            setTimeout(() => {
+                const currentVal = this.getCurrentInputValue();
+                if (currentVal != this._lastText) {
+                    if (isNullOrEmpty(currentVal)) {
+                        this._lastText = currentVal;
+                        this.changed(null);
+                    }
+                }
+            }, 10);
+        });
+    }
+
+    shouldAddModalClick() {
+        if (!PortalUtils.treatAsMobileDevice()) {
+            return false;
+        }
+
+        if (this.calendarPlacement == 'input-container-leftalign' || this.calendarPlacement == 'input-container-rightalign') {
+            return false;
+        }
+
+        return true;
+    }
+
+    clearValue() {
+        this._startDate = null;
+        this._endDate = null;
+        this._lastText = null;
+        this._changed = true;
+        this.getInputElement().val('');
+        this.inputValueChanged();
+    }
+
+    render(h) {
+        return (
+            <FormItemWrapper label={this.label} cssClass={this.getCssClass()} mandatory={this.mandatory} wrap={this.wrap} appendIcon={this.appendIcon} prependIcon={this.prependIcon} hint={this.hint} marginType={this.marginType} appendClicked={this.appendClicked} prependClicked={this.prependClicked} prependIconClicked={this.prependIconClicked} appendIconClicked={this.appendIconClicked} validationState={this.validationState} labelButtons={this.labelButtons} subtitle={this.subtitle}>
+                {this.shouldAddModalClick()
+                    && <div class="pd-daterange-picker-modalclick" onClick={(e) => { this.handleModalOpenClick(e); }}></div>}
+
+                <div style="position: relative; display: flex; align-items: center; flex-grow:1">
+                    {' '}
+                    {/* Added a wrapper for input and clear button */}
+                    <input
+                        type="text"
+                        ref="innerInput"
+                        disabled={this.disabled as any != true ? null : 'disabled'}
+                        readonly={this.readOnly as any != true ? null : 'readonly'}
+                        value={this.getRangeText(this.value)}
+                        class={PowerduckState.getFormControlCssClass()}
+                        placeholder={this.placeholder}
+                        onChange={() => { this.inputValueChanged(); }}
+                    />
+                    {this.showClearValueButton && this._startDate && (
+                        <span class="pd-daterange-picker-clear-button" onClick={() => this.clearValue()}>×</span>
+                    )}
+                </div>
+            </FormItemWrapper>
+        );
+    }
 }
 
 const DaterangePicker = toNative(DaterangePickerComponent);