@gez/date-time-kit 2.0.0-alpha.21 → 2.0.0-alpha.23

package/dist/components/date-time-selector/index.d.ts

@@ -25,7 +25,7 @@ export type Attrs = BaseAttrs & reExportPopoverAttrs & {
     'showing-time'?: string | number;
     /**
      * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
-     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
+     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位将被重置为 0。
      */
     'min-granularity'?: Granularity;
     /**

package/dist/components/date-time-selector/index.mjs

@@ -48,7 +48,7 @@ export class Ele extends UiBase {
     }, 0));
     __publicField(this, "_onCalendarSelect", (e) => {
       e.stopPropagation();
-      this.currentTime = +e.detail + this._timeSelector.millisecond;
+      this.currentTime = +e.detail + (this.minGranularity === "day" ? 0 : this._timeSelector.millisecond);
     });
     __publicField(this, "_onNavChange", (e) => {
       e.stopPropagation();

package/dist/components/period-selector/index.d.ts

@@ -18,7 +18,7 @@ export interface Attrs extends BaseAttrs {
     'time-end': string | number;
     /**
      * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
-     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
+     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位视情况重置为 0 或 23 或 59 或 999。
      */
     'min-granularity'?: Granularity;
     /**
@@ -68,6 +68,7 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     private _updateNavCtrlBtn;
     private _render;
     private _updateDateEcho;
+    private _getTimeSelectorMs;
     private _updateDatePoint;
     private _onCalendarSelect;
     private _onCalendarItemHover;

package/dist/components/period-selector/index.mjs

@@ -91,9 +91,9 @@ export class Ele extends UiBase {
       const newDate = new Date(datePoint).setHours(0, 0, 0, 0);
       const oldDate = new Date(this._selectedDate).setHours(0, 0, 0, 0);
       const setStartDate = (date) => this.timeStart = new Date(
-        date + this._startTimeSelector.millisecond
+        date + this._getTimeSelectorMs("start")
       );
-      const setEndDate = (date) => this.timeEnd = new Date(date + this._endTimeSelector.millisecond);
+      const setEndDate = (date) => this.timeEnd = new Date(date + this._getTimeSelectorMs("end"));
       if (newDate === oldDate) {
         setStartDate(newDate);
         setEndDate(newDate);
@@ -109,7 +109,7 @@ export class Ele extends UiBase {
       e.stopPropagation();
       if (this._selectedDate === null) {
         const newTimePoint = new Date(
-          +e.detail + this._startTimeSelector.millisecond
+          +e.detail + this._getTimeSelectorMs("start")
         );
         this._selectedDate = newTimePoint;
         this.timeStart = newTimePoint;
@@ -348,6 +348,10 @@ export class Ele extends UiBase {
       ".end-date-echo-wrapper"
     ).classList.toggle("active", !!this._selectedDate);
   }
+  _getTimeSelectorMs(type) {
+    const selector = type === "start" ? this._startTimeSelector : this._endTimeSelector;
+    return this.minGranularity === "day" ? type === "start" ? 0 : 86399999 : selector.millisecond;
+  }
   abortSelecting() {
     if (!this._selectedDate) return;
     this._selectedDate = null;

package/dist/components/quick-selector/index.d.ts

@@ -3,6 +3,8 @@ import { type reExportPopoverAttrs } from '../popover/attr-sync-helper';
 import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
 import { type DataLimit, type GenPeriodTimesOptions, type PeriodTimeInfo, type QuickGenPeriodTimesOptions, type QuickKey, UTCInfo2LocaleInfo, genPeriodTimes, localeInfo2UTCInfo, quickGenPeriodTime, quickGenPeriodTimeInfo, quickGenPeriodTimes } from './quick-key';
 export { type QuickKey, type DataLimit, type GenPeriodTimesOptions, type QuickGenPeriodTimesOptions, type PeriodTimeInfo, type Weeks, genPeriodTimes, quickGenPeriodTime, quickGenPeriodTimes, quickGenPeriodTimeInfo, localeInfo2UTCInfo, UTCInfo2LocaleInfo };
+export declare const granularityList: readonly ["day", "hour", "minute", "second", "millisecond"];
+export type Granularity = (typeof granularityList)[number];
 export type Attrs = BaseAttrs & reExportPopoverAttrs & {
     /**
      * Timezone in minutes. For example: UTC+05:45 => `-345`, UTC-01:00 => `60`.
@@ -31,6 +33,11 @@ export type Attrs = BaseAttrs & reExportPopoverAttrs & {
      * End locale time of the quick selection. Only works in custom mode.
      */
     'end-time'?: string | number | '';
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
+     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位视情况重置为 0 或 23 或 59 或 999。
+     */
+    'min-granularity'?: Granularity;
     /**
      * Exclude some quick selection options.
      *
@@ -62,6 +69,8 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     set startTime(val: number | string | Date);
     get endTime(): number | string | Date;
     set endTime(val: number | string | Date);
+    get minGranularity(): NonNullable<Attrs["min-granularity"]>;
+    set minGranularity(val: NonNullable<Attrs['min-granularity']>);
     get excludeField(): (QuickKey | "timezone")[];
     set excludeField(v: (QuickKey | 'timezone')[]);
     protected _style: string;

package/dist/components/quick-selector/index.mjs

@@ -3,6 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { debounce, getCurrentTzOffset } from "../../utils.mjs";
 import { weekKey } from "../calendar/index.mjs";
+import { granularityList as timeGranularityList } from "../hhmmss-ms-list-grp/selector.mjs";
 import { Ele as PopoverEle } from "../popover/index.mjs";
 import {
   clearupPopEleAttrSync2Parent,
@@ -32,6 +33,7 @@ export {
   localeInfo2UTCInfo,
   UTCInfo2LocaleInfo
 };
+export const granularityList = ["day", ...timeGranularityList];
 export class Ele extends UiBase {
   constructor() {
     super();
@@ -54,6 +56,7 @@ export class Ele extends UiBase {
         ele.timeStart = defaultPeriod.start;
         ele.timeEnd = defaultPeriod.end;
       }
+      ele.minGranularity = this.minGranularity;
       ele.showCalendarDatePoint();
     }, 0));
     __publicField(this, "_renderTz", debounce(() => {
@@ -119,7 +122,7 @@ export class Ele extends UiBase {
       const selector = this._periodSelector;
       selector.abortSelecting();
       this._showMenu("top");
-      let { timeStart, timeEnd } = this._periodSelector;
+      let { timeStart, timeEnd } = selector;
       if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
       this.startTime = timeStart;
       this.endTime = timeEnd;
@@ -144,6 +147,7 @@ export class Ele extends UiBase {
       "quick-key",
       "start-time",
       "end-time",
+      "min-granularity",
       "exclude-field",
       ...popoverAttrKeys
     ];
@@ -197,6 +201,13 @@ export class Ele extends UiBase {
     if (Number.isNaN(+v)) return;
     this.setAttribute("end-time", +v + "");
   }
+  get minGranularity() {
+    return this._getAttr("min-granularity", "millisecond");
+  }
+  set minGranularity(val) {
+    if (!granularityList.includes(val)) return;
+    this.setAttribute("min-granularity", val);
+  }
   get excludeField() {
     const v = this._getAttr("exclude-field", "") || "";
     if (v === "") return [];

package/package.json

@@ -20,7 +20,7 @@
         "unbuild": "3.6.0",
         "vitest": "3.2.4"
     },
-    "version": "2.0.0-alpha.21",
+    "version": "2.0.0-alpha.23",
     "type": "module",
     "private": false,
     "exports": {
@@ -39,5 +39,5 @@
         "template",
         "public"
     ],
-    "gitHead": "3e500ac773a8879132d6d1b7f57e142d7d71bf2a"
+    "gitHead": "7f3401c9f9d978163c296f4cb729bd72a30c1084"
 }

package/src/components/date-time-selector/index.ts

@@ -57,7 +57,7 @@ export type Attrs = BaseAttrs &
         'showing-time'?: string | number;
         /**
          * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
-         * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
+         * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位将被重置为 0。
          */
         'min-granularity'?: Granularity;
         /**
@@ -273,7 +273,11 @@ export class Ele extends UiBase<Attrs, Emits> {
 
     private _onCalendarSelect = (e: CalendarBaseEvent['select-time']) => {
         e.stopPropagation();
-        this.currentTime = +e.detail + this._timeSelector.millisecond;
+        this.currentTime =
+            +e.detail +
+            (this.minGranularity === 'day'
+                ? 0
+                : this._timeSelector.millisecond);
     };
     private _onNavChange = (e: YyyyMmNavEvent['change']) => {
         e.stopPropagation();

package/src/components/period-selector/index.ts

@@ -38,7 +38,7 @@ export interface Attrs extends BaseAttrs {
     'time-end': string | number;
     /**
      * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
-     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
+     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位视情况重置为 0 或 23 或 59 或 999。
      */
     'min-granularity'?: Granularity;
     /**
@@ -355,16 +355,26 @@ export class Ele extends UiBase<Attrs, Emits> {
         )!.classList.toggle('active', !!this._selectedDate);
     }
 
+    private _getTimeSelectorMs(type: 'start' | 'end') {
+        const selector =
+            type === 'start' ? this._startTimeSelector : this._endTimeSelector;
+        return this.minGranularity === 'day'
+            ? type === 'start'
+                ? 0
+                : 86399999 // 23:59:59.999
+            : selector.millisecond;
+    }
+
     private _updateDatePoint = (datePoint: Date) => {
         if (!this._selectedDate) return;
         const newDate = new Date(datePoint).setHours(0, 0, 0, 0);
         const oldDate = new Date(this._selectedDate).setHours(0, 0, 0, 0);
         const setStartDate = (date: number) =>
             (this.timeStart = new Date(
-                date + this._startTimeSelector.millisecond
+                date + this._getTimeSelectorMs('start')
             ));
         const setEndDate = (date: number) =>
-            (this.timeEnd = new Date(date + this._endTimeSelector.millisecond));
+            (this.timeEnd = new Date(date + this._getTimeSelectorMs('end')));
         if (newDate === oldDate) {
             setStartDate(newDate);
             setEndDate(newDate);
@@ -380,7 +390,7 @@ export class Ele extends UiBase<Attrs, Emits> {
         e.stopPropagation();
         if (this._selectedDate === null) {
             const newTimePoint = new Date(
-                +e.detail + this._startTimeSelector.millisecond
+                +e.detail + this._getTimeSelectorMs('start')
             );
             this._selectedDate = newTimePoint;
             this.timeStart = newTimePoint;

package/src/components/quick-selector/index.ts

@@ -1,5 +1,6 @@
 import { debounce, getCurrentTzOffset } from '../../utils';
 import { type Weeks, weekKey } from '../calendar';
+import { granularityList as timeGranularityList } from '../hhmmss-ms-list-grp/selector';
 import type { Ele as PeriodSelectorEle } from '../period-selector';
 import { Ele as PopoverEle, type EventMap as PopoverEvent } from '../popover';
 import {
@@ -47,6 +48,9 @@ export {
     UTCInfo2LocaleInfo
 };
 
+export const granularityList = ['day', ...timeGranularityList] as const;
+export type Granularity = (typeof granularityList)[number];
+
 export type Attrs = BaseAttrs &
     reExportPopoverAttrs & {
         /**
@@ -76,6 +80,11 @@ export type Attrs = BaseAttrs &
          * End locale time of the quick selection. Only works in custom mode.
          */
         'end-time'?: string | number | '';
+        /**
+         * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
+         * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位视情况重置为 0 或 23 或 59 或 999。
+         */
+        'min-granularity'?: Granularity;
         /**
          * Exclude some quick selection options.
          *
@@ -106,6 +115,7 @@ export class Ele extends UiBase<Attrs, Emits> {
             'quick-key',
             'start-time',
             'end-time',
+            'min-granularity',
             'exclude-field',
             ...popoverAttrKeys
         ] satisfies (keyof Attrs)[];
@@ -160,6 +170,13 @@ export class Ele extends UiBase<Attrs, Emits> {
         if (Number.isNaN(+v)) return;
         this.setAttribute('end-time', +v + '');
     }
+    public get minGranularity() {
+        return this._getAttr('min-granularity', 'millisecond');
+    }
+    public set minGranularity(val: NonNullable<Attrs['min-granularity']>) {
+        if (!granularityList.includes(val)) return;
+        this.setAttribute('min-granularity', val);
+    }
     public get excludeField() {
         const v = this._getAttr('exclude-field', '') || '';
         if (v === '') return [];
@@ -311,6 +328,7 @@ export class Ele extends UiBase<Attrs, Emits> {
             ele.timeStart = defaultPeriod.start;
             ele.timeEnd = defaultPeriod.end;
         }
+        ele.minGranularity = this.minGranularity;
         ele.showCalendarDatePoint();
     }, 0);
 
@@ -392,7 +410,7 @@ export class Ele extends UiBase<Attrs, Emits> {
         const selector = this._periodSelector;
         selector.abortSelecting();
         this._showMenu('top');
-        let { timeStart, timeEnd } = this._periodSelector;
+        let { timeStart, timeEnd } = selector;
         if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
         this.startTime = timeStart;
         this.endTime = timeEnd;