inviton-powerduck 0.0.155 → 0.0.156

package/components/input/daterange-picker.tsx

@@ -1,537 +1,537 @@
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
+import { Temporal } from '@js-temporal/polyfill';
 import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
+import { utcEpochMilliseconds } from '../../common/extensions/temporal-extensions';
 import DateUtils from '../../common/utils/date-utils';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
+import TemporalUtils from '../../common/utils/temporal-utils';
 import { PortalUtils } from '../../common/utils/utils';
 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: Temporal.PlainDateTime;
+	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?: 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;
+	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: Temporal.PlainDateTime;
-    endTime: Temporal.PlainDateTime;
+	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?: 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>
-        );
-    }
+	@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);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.155",
+	"version": "0.0.156",
 	"files": [
 		"app/",
 		"common/",