@shival99/z-ui 1.3.31 → 1.3.34

package/fesm2022/shival99-z-ui-components-z-calendar.mjs

@@ -445,6 +445,10 @@ const getYearState = (year, selectedYear, todayYear) => {
     }
     return 'default';
 };
+/**
+ * Check if the format string contains time tokens (HH, hh, mm, ss)
+ */
+const hasTimeTokens = (format) => /HH|hh|mm|ss/.test(format);
 
 const zCalendarVariants = cva([
     'group flex min-w-0 w-full items-center overflow-hidden rounded-[6px] border border-input bg-white shadow-xs cursor-pointer',
@@ -1214,8 +1218,24 @@ class ZCalendarComponent {
         return true;
     }, ...(ngDevMode ? [{ debugName: "canNavigateEndPrev" }] : []));
     displayValue = computed(() => {
-        let format = this.zFormat();
-        if (this.zShowTime() || this.isTimeMode()) {
+        const format = this.zFormat();
+        const formatHasTime = hasTimeTokens(format);
+        if (this.isTimeMode()) {
+            const timeParts = [];
+            if (this.zShowHour()) {
+                timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
+            }
+            if (this.zShowMinute()) {
+                timeParts.push('mm');
+            }
+            if (this.zShowSecond()) {
+                timeParts.push('ss');
+            }
+            const timeFormat = timeParts.join(':');
+            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this.period()}` : '';
+            return this._formatDisplayValue(timeFormat + periodSuffix);
+        }
+        if (this.zShowTime() && !formatHasTime) {
             const timeParts = [];
             if (this.zShowHour()) {
                 timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
@@ -1228,8 +1248,11 @@ class ZCalendarComponent {
             }
             const timeFormat = timeParts.join(':');
             const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this.period()}` : '';
-            format = this.isTimeMode() ? timeFormat + periodSuffix : `${this.zFormat()} ${timeFormat}${periodSuffix}`;
+            return this._formatDisplayValue(`${format} ${timeFormat}${periodSuffix}`);
         }
+        return this._formatDisplayValue(format);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    _formatDisplayValue(format) {
         if (this.isRangeMode()) {
             const start = this._rangeStart();
             const end = this._rangeEnd();
@@ -1253,7 +1276,7 @@ class ZCalendarComponent {
             return `Q${quarter} ${date.getFullYear()}`;
         }
         return formatDate(date, format, this.zLocale());
-    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    }
     _inputDisplayStart = signal('', ...(ngDevMode ? [{ debugName: "_inputDisplayStart" }] : []));
     _inputDisplayEnd = signal('', ...(ngDevMode ? [{ debugName: "_inputDisplayEnd" }] : []));
     inputDisplayStart = computed(() => this._inputDisplayStart(), ...(ngDevMode ? [{ debugName: "inputDisplayStart" }] : []));
@@ -1269,8 +1292,9 @@ class ZCalendarComponent {
         return end ? formatDate(end, format, this.zLocale()) : '';
     }, ...(ngDevMode ? [{ debugName: "displayValueEnd" }] : []));
     _getDisplayFormatStart() {
-        let format = this.zFormat();
-        if (this.zShowTime() || this.isTimeMode()) {
+        const format = this.zFormat();
+        const formatHasTime = hasTimeTokens(format);
+        if (this.isTimeMode()) {
             const timeParts = [];
             if (this.zShowHour()) {
                 timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
@@ -1283,13 +1307,29 @@ class ZCalendarComponent {
             }
             const timeFormat = timeParts.join(':');
             const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this.period()}` : '';
-            format = this.isTimeMode() ? timeFormat + periodSuffix : `${this.zFormat()} ${timeFormat}${periodSuffix}`;
+            return timeFormat + periodSuffix;
+        }
+        if (this.zShowTime() && !formatHasTime) {
+            const timeParts = [];
+            if (this.zShowHour()) {
+                timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
+            }
+            if (this.zShowMinute()) {
+                timeParts.push('mm');
+            }
+            if (this.zShowSecond()) {
+                timeParts.push('ss');
+            }
+            const timeFormat = timeParts.join(':');
+            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this.period()}` : '';
+            return `${format} ${timeFormat}${periodSuffix}`;
         }
         return format;
     }
     _getDisplayFormatEnd() {
-        let format = this.zFormat();
-        if (this.zShowTime() || this.isTimeMode()) {
+        const format = this.zFormat();
+        const formatHasTime = hasTimeTokens(format);
+        if (this.isTimeMode()) {
             const timeParts = [];
             if (this.zShowHour()) {
                 timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
@@ -1302,7 +1342,22 @@ class ZCalendarComponent {
             }
             const timeFormat = timeParts.join(':');
             const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this._periodEnd()}` : '';
-            format = this.isTimeMode() ? timeFormat + periodSuffix : `${this.zFormat()} ${timeFormat}${periodSuffix}`;
+            return timeFormat + periodSuffix;
+        }
+        if (this.zShowTime() && !formatHasTime) {
+            const timeParts = [];
+            if (this.zShowHour()) {
+                timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
+            }
+            if (this.zShowMinute()) {
+                timeParts.push('mm');
+            }
+            if (this.zShowSecond()) {
+                timeParts.push('ss');
+            }
+            const timeFormat = timeParts.join(':');
+            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this._periodEnd()}` : '';
+            return `${format} ${timeFormat}${periodSuffix}`;
         }
         return format;
     }
@@ -2479,7 +2534,8 @@ class ZCalendarComponent {
     }
     _handleSingleSelection(date) {
         let finalDate = date;
-        if (this.zShowTime()) {
+        const shouldApplyTime = this.zShowTime() || hasTimeTokens(this.zFormat());
+        if (shouldApplyTime) {
             const defaultTime = this._resolveDefaultTime(this.zDefaultTime());
             this.hour.set(defaultTime.hour);
             this.minute.set(defaultTime.minute);
@@ -2500,9 +2556,10 @@ class ZCalendarComponent {
     _handleRangeSelection(date) {
         const start = this._rangeStart();
         const end = this._rangeEnd();
+        const shouldApplyTime = this.zShowTime() || hasTimeTokens(this.zFormat());
         if (!start || (start && end)) {
             let startDate = date;
-            if (this.zShowTime()) {
+            if (shouldApplyTime) {
                 const defaultTime = this._resolveRangeStartTime();
                 this.hour.set(defaultTime.hour);
                 this.minute.set(defaultTime.minute);
@@ -2520,7 +2577,7 @@ class ZCalendarComponent {
             return;
         }
         let endDate = date;
-        if (this.zShowTime()) {
+        if (shouldApplyTime) {
             const defaultTime = this._resolveRangeEndTime();
             this._hourEnd.set(defaultTime.hour);
             this._minuteEnd.set(defaultTime.minute);