inviton-powerduck 0.0.196 → 0.0.200

package/components/input/daterange-picker.tsx

@@ -51,6 +51,7 @@ interface DaterangePickerArgs extends FormItemWrapperArgs {
 	singleDate?: boolean;
 	pickerRootCssClass?: string;
 	maxDate?: Temporal.PlainDateTime;
+	forceModalMode?: boolean;
 	prevIcon?: string;
 	nextIcon?: string;
 	hideYearInMonthName?: boolean;
@@ -106,6 +107,7 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	@Prop() alwaysOpen!: boolean;
 	@Prop() singleDate!: boolean;
 	@Prop() pickerRootCssClass!: string;
+	@Prop() forceModalMode?: boolean;
 	@Prop() wrap!: boolean;
 	@Prop() hint: string;
 	@Prop() appendIcon: string;
@@ -178,8 +180,8 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			return;
 		}
 
-		const $elem = this.getInputElement();
 		if (!this.useModalMode()) {
+			const $elem = this.getInputElement();
 			this.bindDateRangePicker(
 				$elem,
 				this.calendarPlacement,
@@ -190,29 +192,7 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			);
 		} else {
 			this.getInputElement().parent().on('click', async () => {
-				const uuid = `drp-modal-${PortalUtils.randomString(6)}`;
-				const handle = await DialogUtils.showDialogEx({
-					title: this.label || '',
-					cssClass: 'daterangepicker-modal pd-modal-mobile-input',
-					message: `<div><div id="${uuid}"></div></div>`,
-					buttons: [],
-					onHidden: () => {
-						this.tryDestroyPickerInstance();
-					},
-				});
-
-				const $modalRoot = $(document.getElementById(uuid));
-				this.bindDateRangePicker(
-					$elem,
-					'inline',
-					true,
-					true,
-					() => {
-						this.raiseChangedEvent();
-						handle.hideModal();
-					},
-					$modalRoot,
-				);
+				this.openInModal();
 			});
 		}
 	}
@@ -226,6 +206,10 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	}
 
 	useModalMode(): boolean {
+		if (this.forceModalMode) {
+			return true;
+		}
+
 		if (this.alwaysOpen && (this.calendarPlacement != null && this.calendarPlacement != 'body')) {
 			return false;
 		}
@@ -375,6 +359,45 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 		}, 0);
 	}
 
+	async openInModal(args?: { title: string }) {
+		const uuid = `drp-modal-${PortalUtils.randomString(6)}`;
+		const handle = await DialogUtils.showDialogEx({
+			title: args?.title ?? this.label ?? '',
+			cssClass: 'daterangepicker-modal pd-modal-mobile-input',
+			message: `<div><div id="${uuid}"></div></div>`,
+			buttons: [],
+			onHidden: () => {
+				this.tryDestroyPickerInstance();
+			},
+		});
+
+		setTimeout(() => {
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.$nextTick(() => {
+						const $elem = this.getInputElement();
+						const $modalRoot = $(document.getElementById(uuid));
+
+						(window as any)._elem = $elem;
+						(window as any)._modalRoot = $modalRoot;
+
+						this.bindDateRangePicker(
+							$elem,
+							'inline',
+							true,
+							true,
+							() => {
+								this.raiseChangedEvent();
+								handle.hideModal();
+							},
+							$modalRoot,
+						);
+					});
+				}, 1);
+			});
+		}, 1);
+	}
+
 	close(ms?: number): void {
 		const $elem = this.getInputElement();
 

package/package.json

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