@luoxiao123/angular-material-date-time-range-picker 21.1.1 → 21.1.3

package/fesm2022/luoxiao123-angular-material-date-time-range-picker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, model, output, ChangeDetectionStrategy, Component, input, computed, ChangeDetectorRef, signal, ViewChild, ElementRef, Injector, DestroyRef, effect, untracked, forwardRef, Input, Injectable } from '@angular/core';
+import { model, output, ChangeDetectionStrategy, Component, input, computed, inject, signal, ViewChild, ElementRef, Injector, DestroyRef, effect, untracked, forwardRef, Input } from '@angular/core';
 import { Subject, take, tap } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/material/datepicker';
@@ -8,8 +8,8 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { TablerIconComponent, provideTablerIcons } from '@luoxiao123/angular-tabler-icons';
 import { IconLayoutSidebarLeftCollapse, IconClock, IconX, IconCalendarDue, IconInfoCircle } from '@luoxiao123/angular-tabler-icons/icons';
 import * as i2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
+import { FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i3$1 from '@angular/common';
@@ -20,12 +20,9 @@ import * as i2$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import * as i1$1 from '@angular/cdk/bidi';
-import { MatBottomSheet } from '@angular/material/bottom-sheet';
 
 class Container {
     constructor() {
-        this.#breakpoints = inject(BreakpointObserver);
-        this.isMobile = this.#breakpoints.isMatched([Breakpoints.Handset, Breakpoints.Tablet]);
         this.hasHeader = model(true, ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
         this.hasFooter = model(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
         this.headerTitle = model('', ...(ngDevMode ? [{ debugName: "headerTitle" }] : []));
@@ -48,7 +45,6 @@ class Container {
         this.submit = output();
         this.secondaryButton = output();
     }
-    #breakpoints;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Container, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: Container, isStandalone: true, selector: "date-time-picker-container", inputs: { hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerExtraContent: { classPropertyName: "headerExtraContent", publicName: "headerExtraContent", isSignal: true, isRequired: false, transformFunction: null }, footerExtraContent: { classPropertyName: "footerExtraContent", publicName: "footerExtraContent", isSignal: true, isRequired: false, transformFunction: null }, hasDismiss: { classPropertyName: "hasDismiss", publicName: "hasDismiss", isSignal: true, isRequired: false, transformFunction: null }, hasSubmit: { classPropertyName: "hasSubmit", publicName: "hasSubmit", isSignal: true, isRequired: false, transformFunction: null }, submitTitle: { classPropertyName: "submitTitle", publicName: "submitTitle", isSignal: true, isRequired: false, transformFunction: null }, submitBg: { classPropertyName: "submitBg", publicName: "submitBg", isSignal: true, isRequired: false, transformFunction: null }, submitColor: { classPropertyName: "submitColor", publicName: "submitColor", isSignal: true, isRequired: false, transformFunction: null }, submitTitleColor: { classPropertyName: "submitTitleColor", publicName: "submitTitleColor", isSignal: true, isRequired: false, transformFunction: null }, disabledSubmit: { classPropertyName: "disabledSubmit", publicName: "disabledSubmit", isSignal: true, isRequired: false, transformFunction: null }, hasSecondaryButton: { classPropertyName: "hasSecondaryButton", publicName: "hasSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonTitle: { classPropertyName: "secondaryButtonTitle", publicName: "secondaryButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonBg: { classPropertyName: "secondaryButtonBg", publicName: "secondaryButtonBg", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonColor: { classPropertyName: "secondaryButtonColor", publicName: "secondaryButtonColor", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonTitleColor: { classPropertyName: "secondaryButtonTitleColor", publicName: "secondaryButtonTitleColor", isSignal: true, isRequired: false, transformFunction: null }, disabledSecondaryButton: { classPropertyName: "disabledSecondaryButton", publicName: "disabledSecondaryButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasHeader: "hasHeaderChange", hasFooter: "hasFooterChange", headerTitle: "headerTitleChange", headerExtraContent: "headerExtraContentChange", footerExtraContent: "footerExtraContentChange", hasDismiss: "hasDismissChange", hasSubmit: "hasSubmitChange", submitTitle: "submitTitleChange", submitBg: "submitBgChange", submitColor: "submitColorChange", submitTitleColor: "submitTitleColorChange", disabledSubmit: "disabledSubmitChange", hasSecondaryButton: "hasSecondaryButtonChange", secondaryButtonTitle: "secondaryButtonTitleChange", secondaryButtonBg: "secondaryButtonBgChange", secondaryButtonColor: "secondaryButtonColorChange", secondaryButtonTitleColor: "secondaryButtonTitleColorChange", disabledSecondaryButton: "disabledSecondaryButtonChange", dismiss: "dismiss", submit: "submit", secondaryButton: "secondaryButton" }, providers: [provideTablerIcons({ IconInfoCircle, IconCalendarDue, IconX, IconClock, IconLayoutSidebarLeftCollapse })], ngImport: i0, template: "<aside class=\"container-wrapper\">\r\n  @if (hasHeader()) {\r\n    <header class=\"container-header\">\r\n      <div class=\"container-header-start\">\r\n        <i-tabler name=\"clock\" strokeWidth=\"2px\" size=\"18px\" class=\"container-header-icon\" />\r\n\r\n        @if (headerTitle()) {\r\n          <h2 class=\"container-header-title\">{{ headerTitle() }}</h2>\r\n        }\r\n      </div>\r\n\r\n      @if (headerExtraContent()) {\r\n        <div class=\"container-header-extra\">\r\n          <ng-container *ngTemplateOutlet=\"headerExtraContent() ?? null\"></ng-container>\r\n        </div>\r\n      }\r\n\r\n      <button (click)=\"dismiss.emit()\" type=\"button\" class=\"container-header-close\" [attr.aria-label]=\"'\u5173\u95ED'\" tabindex=\"0\">\r\n        <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"container-header-close-icon\" />\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <main class=\"container-main\">\r\n    <ng-content />\r\n  </main>\r\n\r\n  @if (hasFooter()) {\r\n    <footer class=\"container-footer\">\r\n      @if (footerExtraContent()) {\r\n        <div class=\"container-footer-extra\">\r\n          <ng-container *ngTemplateOutlet=\"footerExtraContent() ?? null\"></ng-container>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"container-footer-actions\">\r\n        @if (hasDismiss()) {\r\n          <button mat-stroked-button color=\"primary\" (click)=\"dismiss.emit()\" type=\"button\"> \u53D6\u6D88 </button>\r\n        }\r\n\r\n        @if (hasSecondaryButton()) {\r\n          <button mat-stroked-button color=\"primary\" (click)=\"secondaryButton.emit()\" type=\"button\" [disabled]=\"disabledSecondaryButton()\">\r\n            {{ secondaryButtonTitle() }}\r\n          </button>\r\n        }\r\n\r\n        @if (hasSubmit()) {\r\n          <button mat-raised-button color=\"primary\" (click)=\"submit.emit()\" type=\"button\" [disabled]=\"disabledSubmit()\">\r\n            {{ submitTitle() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </footer>\r\n  }\r\n</aside>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;height:100%}.container-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.container-header{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:space-between;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-header-start{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.container-header-icon{color:var(--mat-sys-primary, #1976d2);flex-shrink:0}.container-header-title{font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container-header-extra{display:flex;align-items:center;gap:8px;flex:1;padding:0 4px;font-size:.75rem}.container-header-close{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));transition:background-color .2s ease;flex-shrink:0}.container-header-close:hover{background-color:var(--mat-sys-surface-container-highest, rgba(0, 0, 0, .08))}.container-header-close:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.container-header-close-icon{display:flex;align-items:center;justify-content:center}.container-main{flex:1;width:100%;display:flex;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}.container-footer{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-footer-extra{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:.75rem;padding:0 4px}.container-footer-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}\n", ":host{height:100%}\n"], dependencies: [{ kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -95,20 +91,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'date-time-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDatepickerModule, FormsModule, TablerIconComponent, CommonModule], template: "<div class=\"date-time-input-wrapper\">\r\n  <label class=\"date-time-input-label\">{{ label() }}</label>\r\n\r\n  <div class=\"date-time-input-container\">\r\n    <!-- \u65E5\u671F\u90E8\u5206 -->\r\n    <div class=\"date-time-input-date\">\r\n      <input\r\n        type=\"text\"\r\n        matInput\r\n        [ngModel]=\"dateObj()\"\r\n        (ngModelChange)=\"onDateChange($event)\"\r\n        [matDatepicker]=\"datePicker\"\r\n        (click)=\"datePicker.open()\"\r\n        (focus)=\"datePicker.open()\"\r\n        placeholder=\"\u9009\u62E9\u65E5\u671F\"\r\n        class=\"date-time-input-field\"\r\n      />\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <button type=\"button\" class=\"date-time-input-icon-btn\" tabindex=\"-1\" aria-hidden=\"true\">\r\n        <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"16px\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- \u5206\u9694\u7B26 -->\r\n    <div class=\"date-time-input-divider\"></div>\r\n\r\n    <!-- \u65F6\u95F4\u90E8\u5206 -->\r\n    <div class=\"date-time-input-time\">\r\n      <!-- \u5C0F\u65F6 -->\r\n      <select class=\"date-time-input-select date-time-input-select-hour\" [ngModel]=\"hourValue()\" (ngModelChange)=\"onHourChange($event)\" [attr.aria-label]=\"'\u5C0F\u65F6'\">\r\n        <option [ngValue]=\"null\" disabled>--</option>\r\n        @for (hour of hours(); track hour) {\r\n          <option [ngValue]=\"hour\">{{ hour | number: '2.0-0' }}</option>\r\n        }\r\n      </select>\r\n\r\n      <!-- \u5206\u9694\u7B26 -->\r\n      <span class=\"date-time-input-separator\">:</span>\r\n\r\n      <!-- \u5206\u949F -->\r\n      <select class=\"date-time-input-select date-time-input-select-minute\" [ngModel]=\"minuteValue()\" (ngModelChange)=\"onMinuteChange($event)\" [attr.aria-label]=\"'\u5206\u949F'\">\r\n        <option [ngValue]=\"null\" disabled>--</option>\r\n        @for (minute of minutes(); track minute) {\r\n          <option [ngValue]=\"minute\">{{ minute | number: '2.0-0' }}</option>\r\n        }\r\n      </select>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-time-input-wrapper{display:flex;flex-direction:column;gap:8px;padding:12px 16px}@media(max-width:767px){:host .date-time-input-wrapper{padding-bottom:0}}:host .date-time-input-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}:host .date-time-input-container{display:flex;align-items:center;width:100%;max-width:100%;border:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));border-radius:4px;overflow:hidden;background-color:var(--mat-sys-surface-container-low, rgba(0, 0, 0, .02));transition:border-color .2s ease;box-sizing:border-box}:host .date-time-input-container:hover{border-color:var(--mat-divider-color, rgba(0, 0, 0, .24))}:host .date-time-input-container:focus-within{border-color:var(--mat-sys-primary, #1976d2);background-color:var(--mat-sys-surface, #fff)}:host .date-time-input-date{flex:1;display:flex;align-items:center;position:relative;padding:0 8px;min-width:0;overflow:hidden}:host .date-time-input-field{flex:1;height:36px;padding:0;border:none;background:transparent;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis}:host .date-time-input-field::placeholder{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .4))}:host .date-time-input-field:focus{outline:none}:host .date-time-input-icon-btn{position:absolute;right:0;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));pointer-events:none}:host .date-time-input-divider{width:1px;height:20px;background-color:var(--mat-divider-color, rgba(0, 0, 0, .12))}:host .date-time-input-time{flex:1;display:flex;min-width:0;align-items:center;gap:2px;padding:0 8px}:host .date-time-input-select{flex:1;height:36px;border:none;background:transparent;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));font-size:.875rem;font-weight:500;padding:0 2px;cursor:pointer;text-align:center}:host .date-time-input-select:focus{outline:none}:host .date-time-input-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));font-weight:500;padding:0 2px;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateValue", required: false }] }], hourValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourValue", required: false }] }], minuteValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteValue", required: false }] }], hours: [{ type: i0.Input, args: [{ isSignal: true, alias: "hours", required: false }] }], minutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutes", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], hourChange: [{ type: i0.Output, args: ["hourChange"] }], minuteChange: [{ type: i0.Output, args: ["minuteChange"] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] } });
 
+/**
+ * 格式化日期对象为字符串
+ *
+ * 将给定的 Date 对象格式化为包含日期和时间的字符串。
+ * 日期部分使用提供的 DateAdapter 和 MatDateFormats 进行格式化。
+ * 时间部分格式化为 HH:mm (24小时制)。
+ *
+ * @param date - 要格式化的 Date 对象
+ * @param dateAdapter - Angular Material 的 DateAdapter，用于处理日期部分的格式化
+ * @param dateFormats - Angular Material 的 MatDateFormats，包含日期格式配置
+ * @returns 格式化后的日期时间字符串，例如 "2024-01-24 14:30"
+ */
+function formatDate(date, dateAdapter, dateFormats) {
+    const datePart = dateAdapter.format(date, dateFormats.display.dateInput);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${datePart} ${hours}:${minutes}`;
+}
+
+const DEFAULT_TIME_RANGES = [
+    { label: '最近5分钟', start: 'offset:-5minutes', end: 'offset:now' },
+    { label: '最近15分钟', start: 'offset:-15minutes', end: 'offset:now' },
+    { label: '最近30分钟', start: 'offset:-30minutes', end: 'offset:now' },
+    { label: '最近1小时', start: 'offset:-1hours', end: 'offset:now' },
+    { label: '最近3小时', start: 'offset:-3hours', end: 'offset:now' },
+    { label: '最近6小时', start: 'offset:-6hours', end: 'offset:now' },
+    { label: '最近12小时', start: 'offset:-12hours', end: 'offset:now' },
+    { label: '最近24小时', start: 'offset:-24hours', end: 'offset:now' },
+    { label: '最近2天', start: 'offset:-2days', end: 'offset:now' },
+    { label: '最近7天', start: 'offset:-7days', end: 'offset:now' },
+    { label: '最近30天', start: 'offset:-30days', end: 'offset:now' },
+    { label: '最近90天', start: 'offset:-90days', end: 'offset:now' },
+    { label: '最近6个月', start: 'offset:-6months', end: 'offset:now' },
+    { label: '最近1年', start: 'offset:-1years', end: 'offset:now' },
+    { label: '最近2年', start: 'offset:-2years', end: 'offset:now' },
+    { label: '最近5年', start: 'offset:-5years', end: 'offset:now' },
+    { label: '昨天', start: 'offset:-1days/start', end: 'offset:-1days/end' },
+    { label: '前天', start: 'offset:-2days/start', end: 'offset:-2days/end' },
+    { label: '上周同一天', start: 'offset:-7days/start', end: 'offset:-7days/end' },
+    { label: '今天', start: 'offset:0days/start', end: 'offset:0days/end' },
+    { label: '今天至今', start: 'offset:0days/start', end: 'offset:now' },
+    { label: '本周至今', start: 'startof:week', end: 'offset:now' },
+    { label: '本月至今', start: 'startof:month', end: 'offset:now' },
+    { label: '今年至今', start: 'startof:year', end: 'offset:now' }
+];
+const FUTURE_TIME_RANGES = [
+    { label: '未来1天', start: 'offset:now', end: 'offset:+1days' },
+    { label: '未来1周', start: 'offset:now', end: 'offset:+1weeks' },
+    { label: '未来1月', start: 'offset:now', end: 'offset:+1months' },
+    { label: '未来3月', start: 'offset:now', end: 'offset:+3months' }
+];
+
 class DateSelector {
-    #cdr;
     #dialogRef;
     #data;
     #selectionModel;
     #breakpoints;
-    formatDate(date) {
-        const datePart = this._dateAdapter.format(date, this._dateFormats.display.dateInput);
-        const hours = date.getHours().toString().padStart(2, '0');
-        const minutes = date.getMinutes().toString().padStart(2, '0');
-        return `${datePart} ${hours}:${minutes}`;
-    }
     constructor() {
-        this.#cdr = inject(ChangeDetectorRef);
         this.#dialogRef = inject((MatDialogRef));
         this.#data = inject(MAT_DIALOG_DATA);
         this.#selectionModel = inject((MatRangeDateSelectionModel));
@@ -117,7 +157,6 @@ class DateSelector {
         this._dateFormats = inject(MAT_DATE_FORMATS);
         this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
         this.data = this.#data;
-        this.valueFormat = this.data?.valueFormat ?? 'yyyy-MM-dd HH:mm';
         this.startDate = model('', ...(ngDevMode ? [{ debugName: "startDate" }] : []));
         this.endDate = model('', ...(ngDevMode ? [{ debugName: "endDate" }] : []));
         this.startHour = model(null, ...(ngDevMode ? [{ debugName: "startHour" }] : []));
@@ -129,71 +168,21 @@ class DateSelector {
             const startStr = this.startDate();
             if (!startStr)
                 return '';
-            return this.formatDate(new Date(startStr));
+            return formatDate(new Date(startStr), this._dateAdapter, this._dateFormats);
         }, ...(ngDevMode ? [{ debugName: "displayStart" }] : []));
         this.displayEnd = computed(() => {
             const endStr = this.endDate();
             if (!endStr)
                 return '';
-            return this.formatDate(new Date(endStr));
+            return formatDate(new Date(endStr), this._dateAdapter, this._dateFormats);
         }, ...(ngDevMode ? [{ debugName: "displayEnd" }] : []));
-        this.relativeDurations = [
-            ['最近5分钟', '-5minutes'],
-            ['最近15分钟', '-15minutes'],
-            ['最近30分钟', '-30minutes'],
-            ['最近1小时', '-1hours'],
-            ['最近3小时', '-3hours'],
-            ['最近6小时', '-6hours'],
-            ['最近12小时', '-12hours'],
-            ['最近24小时', '-24hours'],
-            ['最近2天', '-2days'],
-            ['最近7天', '-7days'],
-            ['最近30天', '-30days'],
-            ['最近90天', '-90days'],
-            ['最近6个月', '-6months'],
-            ['最近1年', '-1years'],
-            ['最近2年', '-2years'],
-            ['最近5年', '-5years'],
-            ['上周', '-1weeks'],
-            ['上个月', '-1months'],
-            ['去年', '-1years']
-        ];
-        this.fixedDays = [
-            ['昨天', '-1days/day'],
-            ['前天', '-2days/day'],
-            ['上周同一天', '-7days/day'],
-            ['上周', '-1weeks/week'],
-            ['上个月', '-1months/month'],
-            ['去年', '-1years/year']
-        ];
-        this.currentPeriods = [
-            ['今天', 'today', 'today'],
-            ['今天至今', 'today', 'now'],
-            ['本周至今', 'thisweek', 'now'],
-            ['本月至今', 'thismonth', 'now'],
-            ['今年至今', 'thisyear', 'now']
-        ];
-        this.timeRanges = signal([
-            ...this.relativeDurations.map(([label, offset]) => ({
-                label,
-                start: `offset:${offset}`,
-                end: 'offset:now'
-            })),
-            ...this.fixedDays.map(([label, point]) => ({
-                label,
-                start: `offset:${point}`,
-                end: `offset:${point}`
-            })),
-            ...this.currentPeriods.map(([label, start, end]) => ({
-                label,
-                start: `offset:${start}`,
-                end: `offset:${end}`
-            }))
-        ], ...(ngDevMode ? [{ debugName: "timeRanges" }] : []));
+        this.timeRanges = [...DEFAULT_TIME_RANGES];
         this.selectedTimeRange = model(undefined, ...(ngDevMode ? [{ debugName: "selectedTimeRange" }] : []));
         this.selectedDateRange = null;
         this.now = new Date();
         this.selectingStart = true;
+        this.hours = Array.from({ length: 24 }, (_, i) => i);
+        this.minutes = Array.from({ length: 60 }, (_, i) => i);
         this.#breakpoints
             .observe([Breakpoints.Handset, Breakpoints.Tablet])
             .pipe(takeUntilDestroyed())
@@ -212,8 +201,8 @@ class DateSelector {
                     this.selectedDateRange = new DateRange(start, end);
                     this.#selectionModel.updateSelection(this.selectedDateRange, this);
                     // 初始化时间值
-                    this.startDate.set(picker.start);
-                    this.endDate.set(picker.end);
+                    this.startDate.set(!isNaN(start.getTime()) ? start.toISOString() : String(picker.start));
+                    this.endDate.set(!isNaN(end.getTime()) ? end.toISOString() : String(picker.end));
                     this.startHour.set(start.getHours());
                     this.startMinute.set(start.getMinutes());
                     this.endHour.set(end.getHours());
@@ -221,17 +210,11 @@ class DateSelector {
                 }
             }
             if (this.future()) {
-                const futureOffsets = [
-                    { label: '未来1天', start: 'offset:now', end: 'offset:+1days' },
-                    { label: '未来1周', start: 'offset:now', end: 'offset:+1weeks' },
-                    { label: '未来1月', start: 'offset:now', end: 'offset:+1months' },
-                    { label: '未来3月', start: 'offset:now', end: 'offset:+3months' }
-                ];
-                this.timeRanges.update(ranges => [...ranges, ...futureOffsets]);
+                this.timeRanges = [...this.timeRanges, ...FUTURE_TIME_RANGES];
             }
         }
-        else {
-            this.selectTimeRange(this.timeRanges()[5]);
+        if (!this.data?.dateTimePicker) {
+            this.selectTimeRange(this.timeRanges[5]);
         }
     }
     selectTimeRange(timeRange) {
@@ -252,46 +235,89 @@ class DateSelector {
         const parseTime = (time) => {
             if (!time)
                 return new Date(now);
-            if (time.startsWith('offset:')) {
-                const offset = time.replace('offset:', '').trim();
-                if (offset === 'now')
-                    return new Date(now);
-                const regex = /([+-]?)(\d+)(months?|days?|years?|weeks?|hours?|minutes?)/i;
-                const match = regex.exec(offset);
-                if (!match)
-                    return new Date(now);
-                const sign = match[1] === '-' ? -1 : 1;
-                const value = parseInt(match[2], 10) * sign;
-                const unit = match[3].toLowerCase();
+            // 处理 startof: 前缀 (本周/本月/今年)
+            if (time.startsWith('startof:')) {
+                const unit = time.replace('startof:', '').trim().toLowerCase();
                 const result = new Date(now);
+                result.setHours(0, 0, 0, 0);
                 switch (unit) {
-                    case 'minutes':
-                    case 'minute':
-                        result.setMinutes(result.getMinutes() + value);
-                        break;
-                    case 'hours':
-                    case 'hour':
-                        result.setHours(result.getHours() + value);
-                        break;
-                    case 'days':
-                    case 'day':
-                        result.setDate(result.getDate() + value);
-                        break;
-                    case 'weeks':
                     case 'week':
-                        result.setDate(result.getDate() + value * 7);
+                        // 假设周一为一周的开始
+                        const day = result.getDay() || 7; // 0是周日，改为7
+                        if (day !== 1) {
+                            result.setHours(-24 * (day - 1));
+                        }
                         break;
-                    case 'months':
                     case 'month':
-                        result.setMonth(result.getMonth() + value);
+                        result.setDate(1);
                         break;
-                    case 'years':
                     case 'year':
-                        result.setFullYear(result.getFullYear() + value);
+                        result.setMonth(0, 1);
                         break;
                 }
                 return result;
             }
+            // 处理 offset: 前缀
+            if (time.startsWith('offset:')) {
+                const offsetStr = time.replace('offset:', '').trim();
+                if (offsetStr === 'now')
+                    return new Date(now);
+                // 检查是否有 /start 或 /end 后缀
+                let suffix = '';
+                let cleanOffset = offsetStr;
+                if (offsetStr.endsWith('/start')) {
+                    suffix = 'start';
+                    cleanOffset = offsetStr.replace('/start', '');
+                }
+                else if (offsetStr.endsWith('/end')) {
+                    suffix = 'end';
+                    cleanOffset = offsetStr.replace('/end', '');
+                }
+                const regex = /([+-]?)(\d+)(months?|days?|years?|weeks?|hours?|minutes?)/i;
+                const match = regex.exec(cleanOffset);
+                // 如果没有匹配到数字偏移量，但有后缀（例如 offset:0days/start），尝试解析
+                // 注意：上面的正则也能匹配 0days
+                const result = new Date(now);
+                if (match) {
+                    const sign = match[1] === '-' ? -1 : 1;
+                    const value = parseInt(match[2], 10) * sign;
+                    const unit = match[3].toLowerCase();
+                    switch (unit) {
+                        case 'minutes':
+                        case 'minute':
+                            result.setMinutes(result.getMinutes() + value);
+                            break;
+                        case 'hours':
+                        case 'hour':
+                            result.setHours(result.getHours() + value);
+                            break;
+                        case 'days':
+                        case 'day':
+                            result.setDate(result.getDate() + value);
+                            break;
+                        case 'weeks':
+                        case 'week':
+                            result.setDate(result.getDate() + value * 7);
+                            break;
+                        case 'months':
+                        case 'month':
+                            result.setMonth(result.getMonth() + value);
+                            break;
+                        case 'years':
+                        case 'year':
+                            result.setFullYear(result.getFullYear() + value);
+                            break;
+                    }
+                }
+                // 应用后缀修正
+                if (suffix === 'start') {
+                    result.setHours(0, 0, 0, 0);
+                }
+                else if (suffix === 'end') {
+                    result.setHours(23, 59, 59, 999);
+                }
+                return result;
+            }
             return new Date(time);
         };
         const startDate = timeRange.start ? parseTime(timeRange.start) : null;
@@ -350,33 +376,79 @@ class DateSelector {
         this.selectedDateRange = range;
         this.startDate.set(start?.toISOString() ?? '');
         this.endDate.set(end?.toISOString() ?? '');
+        if (start) {
+            this.startHour.set(start.getHours());
+            this.startMinute.set(start.getMinutes());
+        }
+        else {
+            this.startHour.set(null);
+            this.startMinute.set(null);
+        }
+        if (end) {
+            this.endHour.set(end.getHours());
+            this.endMinute.set(end.getMinutes());
+        }
+        else {
+            this.endHour.set(null);
+            this.endMinute.set(null);
+        }
     }
     rangeChanged(selectedDate) {
         if (!selectedDate)
             return;
-        // 创建一个新日期对象，保留日期部分，但使用当前时间作为时间部分
-        const now = new Date();
-        const dateWithCurrentTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());
         if (this.selectingStart) {
-            this.startDate.set(dateWithCurrentTime.toISOString());
+            // 正在选择开始日期
+            let h = 0, m = 0, s = 0, ms = 0;
+            // 尝试保留之前的开始时间
+            if (this.selectedDateRange?.start) {
+                h = this.selectedDateRange.start.getHours();
+                m = this.selectedDateRange.start.getMinutes();
+                s = this.selectedDateRange.start.getSeconds();
+            }
+            const newStart = new Date(selectedDate);
+            newStart.setHours(h, m, s, ms);
+            this.startDate.set(newStart.toISOString());
             this.endDate.set('');
-            this.startHour.set(dateWithCurrentTime.getHours());
-            this.startMinute.set(dateWithCurrentTime.getMinutes());
+            this.startHour.set(newStart.getHours());
+            this.startMinute.set(newStart.getMinutes());
             this.endHour.set(null);
             this.endMinute.set(null);
             this.selectedTimeRange.set(undefined);
-            this.selectedDateRange = new DateRange(dateWithCurrentTime, null);
+            this.selectedDateRange = new DateRange(newStart, null);
             this.#selectionModel.updateSelection(this.selectedDateRange, this);
             this.selectingStart = false;
         }
         else {
+            // 正在选择结束日期
             const start = this.#selectionModel.selection.start;
             if (!start)
                 return;
-            const range = start.toDateString() === selectedDate.toDateString()
-                ? new DateRange(start, start)
-                : new DateRange(start < dateWithCurrentTime ? start : dateWithCurrentTime, start < dateWithCurrentTime ? dateWithCurrentTime : start);
-            this.updateSelection(range.start, range.end);
+            const startDay = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+            const selectedDay = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
+            let newStart;
+            let newEnd;
+            if (selectedDay.getTime() < startDay.getTime()) {
+                // 用户选了一个比 Start 更早的日期 -> 交换角色
+                // 新 Start (selectedDate) 设为 00:00
+                newStart = new Date(selectedDate);
+                newStart.setHours(0, 0, 0, 0);
+                // 新 End (旧 start) 设为 23:59
+                newEnd = new Date(start);
+                newEnd.setHours(23, 59, 59, 999);
+            }
+            else {
+                // 正常顺序 (selectedDate >= start)
+                // Start 保持原样
+                newStart = new Date(start);
+                // End (selectedDate) 设为 23:59
+                newEnd = new Date(selectedDate);
+                newEnd.setHours(23, 59, 59, 999);
+                // 如果是同一天，确保 Start <= End
+                if (newStart.getTime() > newEnd.getTime()) {
+                    newStart.setHours(0, 0, 0, 0);
+                }
+            }
+            this.updateSelection(newStart, newEnd);
             this.selectingStart = true;
         }
     }
@@ -392,13 +464,17 @@ class DateSelector {
         this.endMinute.set(end.getMinutes());
     }
     submit() {
-        const start = new Date(this.selectedDateRange?.start ?? '');
-        const end = new Date(this.selectedDateRange?.end ?? '');
-        const startISO = start.toISOString();
-        const endISO = end.toISOString();
+        if (!this.selectedDateRange?.start || !this.selectedDateRange?.end) {
+            return;
+        }
+        const start = new Date(this.selectedDateRange.start);
+        const end = new Date(this.selectedDateRange.end);
+        if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            return;
+        }
         const result = {
-            start: startISO,
-            end: endISO
+            start: start.toISOString(),
+            end: end.toISOString()
         };
         this.data = { ...this.data, dateTimePicker: result };
         this.#dialogRef.close(this.data);
@@ -406,12 +482,6 @@ class DateSelector {
     dismiss() {
         this.#dialogRef.close(undefined);
     }
-    getHours() {
-        return Array.from({ length: 24 }, (_, i) => i);
-    }
-    getMinutes() {
-        return Array.from({ length: 60 }, (_, i) => i);
-    }
     updateStartTime() {
         if (this.selectedDateRange?.start && this.startHour() !== null && this.startMinute() !== null) {
             const startDate = new Date(this.selectedDateRange.start);
@@ -438,7 +508,7 @@ class DateSelector {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DateSelector, isStandalone: true, selector: "date-time-picker-selector", inputs: { startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, startMinute: { classPropertyName: "startMinute", publicName: "startMinute", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, endMinute: { classPropertyName: "endMinute", publicName: "endMinute", isSignal: true, isRequired: false, transformFunction: null }, future: { classPropertyName: "future", publicName: "future", isSignal: true, isRequired: false, transformFunction: null }, selectedTimeRange: { classPropertyName: "selectedTimeRange", publicName: "selectedTimeRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", startHour: "startHourChange", startMinute: "startMinuteChange", endHour: "endHourChange", endMinute: "endMinuteChange", future: "futureChange", selectedTimeRange: "selectedTimeRangeChange" }, providers: [
             DefaultMatCalendarRangeStrategy,
             MatRangeDateSelectionModel
-        ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<date-time-picker-container\r\n  headerTitle=\"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\"\r\n  submitTitle=\"\u5E94\u7528\"\r\n  [disabledSubmit]=\"!selectedDateRange\"\r\n  [footerExtraContent]=\"footerExtraContent\"\r\n  (submit)=\"submit()\"\r\n  (dismiss)=\"dismiss()\"\r\n>\r\n  <mat-sidenav-container class=\"date-selector-sidenav-container\">\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F -->\r\n    <mat-sidenav\r\n      #sidenav\r\n      [mode]=\"isMobile() ? 'over' : 'side'\"\r\n      [opened]=\"!isMobile()\"\r\n      class=\"date-selector-sidebar\"\r\n      dir=\"rtl\"\r\n    >\r\n      <div class=\"date-selector-sidebar-inner\" dir=\"ltr\">\r\n        <div class=\"date-selector-sidebar-header\">\r\n          <span class=\"date-selector-sidebar-title\">\u5FEB\u6377\u9009\u62E9</span>\r\n          @if (isMobile()) {\r\n            <button mat-icon-button (click)=\"sidenav.close()\">\r\n              <i-tabler name=\"layout-sidebar-left-collapse\" />\r\n            </button>\r\n          }\r\n        </div>\r\n        <ul class=\"date-selector-sidebar-list\">\r\n          @for (timeRangeItem of timeRanges(); track timeRangeItem) {\r\n            <li class=\"date-selector-sidebar-item\">\r\n              <button\r\n                type=\"button\"\r\n                (click)=\"selectTimeRange(timeRangeItem); isMobile() && sidenav.close()\"\r\n                [class.selected]=\"selectedTimeRange() && selectedTimeRange()?.start === timeRangeItem.start && selectedTimeRange()?.end === timeRangeItem.end\"\r\n                class=\"date-selector-sidebar-btn\"\r\n              >\r\n                <span class=\"date-selector-sidebar-text\">{{ timeRangeItem.label }}</span>\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </mat-sidenav>\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F\u7ED3\u675F -->\r\n\r\n    <mat-sidenav-content>\r\n      @if (isMobile()) {\r\n        <div class=\"date-selector-mobile-toolbar\">\r\n          <button mat-button (click)=\"sidenav.open()\">\r\n            <span>\u5FEB\u6377\u9009\u62E9</span>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- \u4E3B\u8981\u5185\u5BB9\u533A\u57DF -->\r\n      <div class=\"date-selector-main\">\r\n        <div class=\"date-selector-content\">\r\n          <!-- \u65E5\u5386\u5BB9\u5668 -->\r\n          <section class=\"date-selector-calendar-section\">\r\n            <div class=\"date-selector-calendar-wrapper\">\r\n              <mat-calendar [maxDate]=\"!future() ? now : undefined\" [(selected)]=\"selectedDateRange\" (selectedChange)=\"rangeChanged($event)\" class=\"date-selector-calendar\" />\r\n            </div>\r\n          </section>\r\n          <!-- \u65E5\u5386\u5BB9\u5668\u7ED3\u675F -->\r\n\r\n          <!-- \u65F6\u95F4\u8BBE\u7F6E\u5BB9\u5668 -->\r\n          <section class=\"date-selector-time-section\">\r\n            <!-- \u5F00\u59CB\u548C\u7ED3\u675F\u8F93\u5165\u65E5\u671F -->\r\n            <div class=\"date-selector-inputs\">\r\n              <!-- \u4ECE\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u5F00\u59CB\u65E5\u671F\"\r\n                [dateValue]=\"startDate()\"\r\n                [hourValue]=\"startHour()\"\r\n                (hourChange)=\"startHour.set($event)\"\r\n                [minuteValue]=\"startMinute()\"\r\n                (minuteChange)=\"startMinute.set($event)\"\r\n                [hours]=\"getHours()\"\r\n                [minutes]=\"getMinutes()\"\r\n                (dateChange)=\"changeDatePart('start', $event)\"\r\n                (timeChange)=\"updateStartTime()\"\r\n              />\r\n\r\n              <!-- \u7ED3\u675F\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u7ED3\u675F\u65E5\u671F\"\r\n                [dateValue]=\"endDate()\"\r\n                [hourValue]=\"endHour()\"\r\n                (hourChange)=\"endHour.set($event)\"\r\n                [minuteValue]=\"endMinute()\"\r\n                (minuteChange)=\"endMinute.set($event)\"\r\n                [hours]=\"getHours()\"\r\n                [minutes]=\"getMinutes()\"\r\n                (dateChange)=\"changeDatePart('end', $event)\"\r\n                (timeChange)=\"updateEndTime()\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"date-selector-hint-wrapper\">\r\n              <div class=\"date-selector-hint\">\r\n                <i-tabler name=\"info-circle\" strokeWidth=\"2px\" class=\"date-selector-hint-icon\"></i-tabler>\r\n                <span class=\"date-selector-hint-text\">\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002</span>\r\n              </div>\r\n            </div>\r\n\r\n      </section>\r\n    </div>\r\n  </div>\r\n  </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</date-time-picker-container>\r\n\r\n<ng-template #footerExtraContent>\r\n  <div class=\"date-selector-footer-range\">\r\n    <span class=\"date-selector-footer-label\">\u8303\u56F4\uFF1A</span>\r\n\r\n    @if (startDate()) {\r\n      <div class=\"date-selector-footer-value\">\r\n        @if (startDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayStart() }}</span>\r\n        }\r\n\r\n        @if (startDate() && endDate()) {\r\n          <span class=\"date-selector-footer-separator\">-</span>\r\n        }\r\n\r\n        @if (endDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayEnd() }}</span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.date-selector-sidebar{width:12rem;height:100%;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}.date-selector-sidebar-inner{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center}.date-selector-sidebar-title{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item{margin:0;padding:0}.date-selector-sidebar-btn{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text{display:block}.date-selector-main{width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(max-width:767px){.date-selector-main{height:auto;flex:1}}.date-selector-content{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content{flex-direction:row}}.date-selector-calendar-section{width:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section{width:50%}}@media(max-width:767px){.date-selector-calendar-section{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));padding-top:0;padding-bottom:0}}.date-selector-calendar-wrapper{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar{width:100%}.date-selector-hint{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-hint-wrapper{padding:12px 16px}.date-selector-time-section{width:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-time-section{width:50%}}.date-selector-inputs{display:flex;flex-direction:column;padding:0}.date-selector-footer-range{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label{display:block}}.date-selector-footer-value{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator{display:block}}.date-selector-sidenav-container{width:100%;height:100%;background-color:transparent}.date-selector-mobile-toolbar{padding:8px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;align-items:center}\n", ":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i1$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Container, selector: "date-time-picker-container", inputs: ["hasHeader", "hasFooter", "headerTitle", "headerExtraContent", "footerExtraContent", "hasDismiss", "hasSubmit", "submitTitle", "submitBg", "submitColor", "submitTitleColor", "disabledSubmit", "hasSecondaryButton", "secondaryButtonTitle", "secondaryButtonBg", "secondaryButtonColor", "secondaryButtonTitleColor", "disabledSecondaryButton"], outputs: ["hasHeaderChange", "hasFooterChange", "headerTitleChange", "headerExtraContentChange", "footerExtraContentChange", "hasDismissChange", "hasSubmitChange", "submitTitleChange", "submitBgChange", "submitColorChange", "submitTitleColorChange", "disabledSubmitChange", "hasSecondaryButtonChange", "secondaryButtonTitleChange", "secondaryButtonBgChange", "secondaryButtonColorChange", "secondaryButtonTitleColorChange", "disabledSecondaryButtonChange", "dismiss", "submit", "secondaryButton"] }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input", inputs: ["label", "dateValue", "hourValue", "minuteValue", "hours", "minutes"], outputs: ["dateChange", "hourChange", "minuteChange", "timeChange"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<date-time-picker-container\r\n  headerTitle=\"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\"\r\n  submitTitle=\"\u5E94\u7528\"\r\n  [disabledSubmit]=\"!selectedDateRange\"\r\n  [footerExtraContent]=\"footerExtraContent\"\r\n  (submit)=\"submit()\"\r\n  (dismiss)=\"dismiss()\"\r\n>\r\n  <mat-sidenav-container class=\"date-selector-sidenav-container\">\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F -->\r\n    <mat-sidenav #sidenav [mode]=\"isMobile() ? 'over' : 'side'\" [opened]=\"!isMobile()\" class=\"date-selector-sidebar\" dir=\"rtl\">\r\n      <div class=\"date-selector-sidebar-inner\" dir=\"ltr\">\r\n        <div class=\"date-selector-sidebar-header\">\r\n          <span class=\"date-selector-sidebar-title\">\u5FEB\u6377\u9009\u62E9</span>\r\n          @if (isMobile()) {\r\n            <button mat-icon-button (click)=\"sidenav.close()\">\r\n              <i-tabler name=\"layout-sidebar-left-collapse\" />\r\n            </button>\r\n          }\r\n        </div>\r\n        <ul class=\"date-selector-sidebar-list\">\r\n          @for (timeRangeItem of timeRanges; track timeRangeItem) {\r\n            <li class=\"date-selector-sidebar-item\">\r\n              <button\r\n                type=\"button\"\r\n                (click)=\"selectTimeRange(timeRangeItem); isMobile() && sidenav.close()\"\r\n                [class.selected]=\"selectedTimeRange() && selectedTimeRange()?.start === timeRangeItem.start && selectedTimeRange()?.end === timeRangeItem.end\"\r\n                class=\"date-selector-sidebar-btn\"\r\n              >\r\n                <span class=\"date-selector-sidebar-text\">{{ timeRangeItem.label }}</span>\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </mat-sidenav>\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F\u7ED3\u675F -->\r\n\r\n    <mat-sidenav-content>\r\n      @if (isMobile()) {\r\n        <div class=\"date-selector-mobile-toolbar\">\r\n          <button mat-button (click)=\"sidenav.open()\">\r\n            <span>\u5FEB\u6377\u9009\u62E9</span>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- \u4E3B\u8981\u5185\u5BB9\u533A\u57DF -->\r\n      <div class=\"date-selector-main\">\r\n        <div class=\"date-selector-content\">\r\n          <!-- \u65E5\u5386\u5BB9\u5668 -->\r\n          <section class=\"date-selector-calendar-section\">\r\n            <div class=\"date-selector-calendar-wrapper\">\r\n              <mat-calendar [maxDate]=\"!future() ? now : undefined\" [(selected)]=\"selectedDateRange\" (selectedChange)=\"rangeChanged($event)\" class=\"date-selector-calendar\" />\r\n            </div>\r\n          </section>\r\n          <!-- \u65E5\u5386\u5BB9\u5668\u7ED3\u675F -->\r\n\r\n          <!-- \u65F6\u95F4\u8BBE\u7F6E\u5BB9\u5668 -->\r\n          <section class=\"date-selector-time-section\">\r\n            <!-- \u5F00\u59CB\u548C\u7ED3\u675F\u8F93\u5165\u65E5\u671F -->\r\n            <div class=\"date-selector-inputs\">\r\n              <!-- \u4ECE\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u5F00\u59CB\u65E5\u671F\"\r\n                [dateValue]=\"startDate()\"\r\n                [hourValue]=\"startHour()\"\r\n                (hourChange)=\"startHour.set($event)\"\r\n                [minuteValue]=\"startMinute()\"\r\n                (minuteChange)=\"startMinute.set($event)\"\r\n                [hours]=\"hours\"\r\n                [minutes]=\"minutes\"\r\n                (dateChange)=\"changeDatePart('start', $event)\"\r\n                (timeChange)=\"updateStartTime()\"\r\n              />\r\n\r\n              <!-- \u7ED3\u675F\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u7ED3\u675F\u65E5\u671F\"\r\n                [dateValue]=\"endDate()\"\r\n                [hourValue]=\"endHour()\"\r\n                (hourChange)=\"endHour.set($event)\"\r\n                [minuteValue]=\"endMinute()\"\r\n                (minuteChange)=\"endMinute.set($event)\"\r\n                [hours]=\"hours\"\r\n                [minutes]=\"minutes\"\r\n                (dateChange)=\"changeDatePart('end', $event)\"\r\n                (timeChange)=\"updateEndTime()\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"date-selector-hint-wrapper\">\r\n              <div class=\"date-selector-hint\">\r\n                <i-tabler name=\"info-circle\" strokeWidth=\"2px\" class=\"date-selector-hint-icon\"></i-tabler>\r\n                <span class=\"date-selector-hint-text\">\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002</span>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</date-time-picker-container>\r\n\r\n<ng-template #footerExtraContent>\r\n  <div class=\"date-selector-footer-range\">\r\n    <span class=\"date-selector-footer-label\">\u8303\u56F4\uFF1A</span>\r\n\r\n    @if (startDate()) {\r\n      <div class=\"date-selector-footer-value\">\r\n        @if (startDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayStart() }}</span>\r\n        }\r\n\r\n        @if (startDate() && endDate()) {\r\n          <span class=\"date-selector-footer-separator\">-</span>\r\n        }\r\n\r\n        @if (endDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayEnd() }}</span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.date-selector-sidebar{width:12rem;height:100%;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}.date-selector-sidebar-inner{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center}.date-selector-sidebar-title{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item{margin:0;padding:0}.date-selector-sidebar-btn{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text{display:block}.date-selector-main{width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(max-width:767px){.date-selector-main{height:auto;flex:1}}.date-selector-content{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content{flex-direction:row}}.date-selector-calendar-section{width:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section{width:50%}}@media(max-width:767px){.date-selector-calendar-section{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));padding-top:0;padding-bottom:0}}.date-selector-calendar-wrapper{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar{width:100%}.date-selector-hint{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-hint-wrapper{padding:12px 16px}.date-selector-time-section{width:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-time-section{width:50%}}.date-selector-inputs{display:flex;flex-direction:column;padding:0}.date-selector-footer-range{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label{display:block}}.date-selector-footer-value{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator{display:block}}.date-selector-sidenav-container{width:100%;height:100%;background-color:transparent}.date-selector-mobile-toolbar{padding:8px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;align-items:center}\n", ":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i1$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Container, selector: "date-time-picker-container", inputs: ["hasHeader", "hasFooter", "headerTitle", "headerExtraContent", "footerExtraContent", "hasDismiss", "hasSubmit", "submitTitle", "submitBg", "submitColor", "submitTitleColor", "disabledSubmit", "hasSecondaryButton", "secondaryButtonTitle", "secondaryButtonBg", "secondaryButtonColor", "secondaryButtonTitleColor", "disabledSecondaryButton"], outputs: ["hasHeaderChange", "hasFooterChange", "headerTitleChange", "headerExtraContentChange", "footerExtraContentChange", "hasDismissChange", "hasSubmitChange", "submitTitleChange", "submitBgChange", "submitColorChange", "submitTitleColorChange", "disabledSubmitChange", "hasSecondaryButtonChange", "secondaryButtonTitleChange", "secondaryButtonBgChange", "secondaryButtonColorChange", "secondaryButtonTitleColorChange", "disabledSecondaryButtonChange", "dismiss", "submit", "secondaryButton"] }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input", inputs: ["label", "dateValue", "hourValue", "minuteValue", "hours", "minutes"], outputs: ["dateChange", "hourChange", "minuteChange", "timeChange"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateSelector, decorators: [{
             type: Component,
@@ -455,7 +525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         DateTimeInputComponent,
                         MatSidenavModule,
                         MatButtonModule
-                    ], template: "<date-time-picker-container\r\n  headerTitle=\"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\"\r\n  submitTitle=\"\u5E94\u7528\"\r\n  [disabledSubmit]=\"!selectedDateRange\"\r\n  [footerExtraContent]=\"footerExtraContent\"\r\n  (submit)=\"submit()\"\r\n  (dismiss)=\"dismiss()\"\r\n>\r\n  <mat-sidenav-container class=\"date-selector-sidenav-container\">\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F -->\r\n    <mat-sidenav\r\n      #sidenav\r\n      [mode]=\"isMobile() ? 'over' : 'side'\"\r\n      [opened]=\"!isMobile()\"\r\n      class=\"date-selector-sidebar\"\r\n      dir=\"rtl\"\r\n    >\r\n      <div class=\"date-selector-sidebar-inner\" dir=\"ltr\">\r\n        <div class=\"date-selector-sidebar-header\">\r\n          <span class=\"date-selector-sidebar-title\">\u5FEB\u6377\u9009\u62E9</span>\r\n          @if (isMobile()) {\r\n            <button mat-icon-button (click)=\"sidenav.close()\">\r\n              <i-tabler name=\"layout-sidebar-left-collapse\" />\r\n            </button>\r\n          }\r\n        </div>\r\n        <ul class=\"date-selector-sidebar-list\">\r\n          @for (timeRangeItem of timeRanges(); track timeRangeItem) {\r\n            <li class=\"date-selector-sidebar-item\">\r\n              <button\r\n                type=\"button\"\r\n                (click)=\"selectTimeRange(timeRangeItem); isMobile() && sidenav.close()\"\r\n                [class.selected]=\"selectedTimeRange() && selectedTimeRange()?.start === timeRangeItem.start && selectedTimeRange()?.end === timeRangeItem.end\"\r\n                class=\"date-selector-sidebar-btn\"\r\n              >\r\n                <span class=\"date-selector-sidebar-text\">{{ timeRangeItem.label }}</span>\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </mat-sidenav>\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F\u7ED3\u675F -->\r\n\r\n    <mat-sidenav-content>\r\n      @if (isMobile()) {\r\n        <div class=\"date-selector-mobile-toolbar\">\r\n          <button mat-button (click)=\"sidenav.open()\">\r\n            <span>\u5FEB\u6377\u9009\u62E9</span>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- \u4E3B\u8981\u5185\u5BB9\u533A\u57DF -->\r\n      <div class=\"date-selector-main\">\r\n        <div class=\"date-selector-content\">\r\n          <!-- \u65E5\u5386\u5BB9\u5668 -->\r\n          <section class=\"date-selector-calendar-section\">\r\n            <div class=\"date-selector-calendar-wrapper\">\r\n              <mat-calendar [maxDate]=\"!future() ? now : undefined\" [(selected)]=\"selectedDateRange\" (selectedChange)=\"rangeChanged($event)\" class=\"date-selector-calendar\" />\r\n            </div>\r\n          </section>\r\n          <!-- \u65E5\u5386\u5BB9\u5668\u7ED3\u675F -->\r\n\r\n          <!-- \u65F6\u95F4\u8BBE\u7F6E\u5BB9\u5668 -->\r\n          <section class=\"date-selector-time-section\">\r\n            <!-- \u5F00\u59CB\u548C\u7ED3\u675F\u8F93\u5165\u65E5\u671F -->\r\n            <div class=\"date-selector-inputs\">\r\n              <!-- \u4ECE\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u5F00\u59CB\u65E5\u671F\"\r\n                [dateValue]=\"startDate()\"\r\n                [hourValue]=\"startHour()\"\r\n                (hourChange)=\"startHour.set($event)\"\r\n                [minuteValue]=\"startMinute()\"\r\n                (minuteChange)=\"startMinute.set($event)\"\r\n                [hours]=\"getHours()\"\r\n                [minutes]=\"getMinutes()\"\r\n                (dateChange)=\"changeDatePart('start', $event)\"\r\n                (timeChange)=\"updateStartTime()\"\r\n              />\r\n\r\n              <!-- \u7ED3\u675F\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u7ED3\u675F\u65E5\u671F\"\r\n                [dateValue]=\"endDate()\"\r\n                [hourValue]=\"endHour()\"\r\n                (hourChange)=\"endHour.set($event)\"\r\n                [minuteValue]=\"endMinute()\"\r\n                (minuteChange)=\"endMinute.set($event)\"\r\n                [hours]=\"getHours()\"\r\n                [minutes]=\"getMinutes()\"\r\n                (dateChange)=\"changeDatePart('end', $event)\"\r\n                (timeChange)=\"updateEndTime()\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"date-selector-hint-wrapper\">\r\n              <div class=\"date-selector-hint\">\r\n                <i-tabler name=\"info-circle\" strokeWidth=\"2px\" class=\"date-selector-hint-icon\"></i-tabler>\r\n                <span class=\"date-selector-hint-text\">\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002</span>\r\n              </div>\r\n            </div>\r\n\r\n      </section>\r\n    </div>\r\n  </div>\r\n  </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</date-time-picker-container>\r\n\r\n<ng-template #footerExtraContent>\r\n  <div class=\"date-selector-footer-range\">\r\n    <span class=\"date-selector-footer-label\">\u8303\u56F4\uFF1A</span>\r\n\r\n    @if (startDate()) {\r\n      <div class=\"date-selector-footer-value\">\r\n        @if (startDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayStart() }}</span>\r\n        }\r\n\r\n        @if (startDate() && endDate()) {\r\n          <span class=\"date-selector-footer-separator\">-</span>\r\n        }\r\n\r\n        @if (endDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayEnd() }}</span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.date-selector-sidebar{width:12rem;height:100%;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}.date-selector-sidebar-inner{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center}.date-selector-sidebar-title{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item{margin:0;padding:0}.date-selector-sidebar-btn{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text{display:block}.date-selector-main{width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(max-width:767px){.date-selector-main{height:auto;flex:1}}.date-selector-content{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content{flex-direction:row}}.date-selector-calendar-section{width:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section{width:50%}}@media(max-width:767px){.date-selector-calendar-section{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));padding-top:0;padding-bottom:0}}.date-selector-calendar-wrapper{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar{width:100%}.date-selector-hint{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-hint-wrapper{padding:12px 16px}.date-selector-time-section{width:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-time-section{width:50%}}.date-selector-inputs{display:flex;flex-direction:column;padding:0}.date-selector-footer-range{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label{display:block}}.date-selector-footer-value{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator{display:block}}.date-selector-sidenav-container{width:100%;height:100%;background-color:transparent}.date-selector-mobile-toolbar{padding:8px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;align-items:center}\n", ":host{display:block;height:100%}\n"] }]
+                    ], template: "<date-time-picker-container\r\n  headerTitle=\"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\"\r\n  submitTitle=\"\u5E94\u7528\"\r\n  [disabledSubmit]=\"!selectedDateRange\"\r\n  [footerExtraContent]=\"footerExtraContent\"\r\n  (submit)=\"submit()\"\r\n  (dismiss)=\"dismiss()\"\r\n>\r\n  <mat-sidenav-container class=\"date-selector-sidenav-container\">\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F -->\r\n    <mat-sidenav #sidenav [mode]=\"isMobile() ? 'over' : 'side'\" [opened]=\"!isMobile()\" class=\"date-selector-sidebar\" dir=\"rtl\">\r\n      <div class=\"date-selector-sidebar-inner\" dir=\"ltr\">\r\n        <div class=\"date-selector-sidebar-header\">\r\n          <span class=\"date-selector-sidebar-title\">\u5FEB\u6377\u9009\u62E9</span>\r\n          @if (isMobile()) {\r\n            <button mat-icon-button (click)=\"sidenav.close()\">\r\n              <i-tabler name=\"layout-sidebar-left-collapse\" />\r\n            </button>\r\n          }\r\n        </div>\r\n        <ul class=\"date-selector-sidebar-list\">\r\n          @for (timeRangeItem of timeRanges; track timeRangeItem) {\r\n            <li class=\"date-selector-sidebar-item\">\r\n              <button\r\n                type=\"button\"\r\n                (click)=\"selectTimeRange(timeRangeItem); isMobile() && sidenav.close()\"\r\n                [class.selected]=\"selectedTimeRange() && selectedTimeRange()?.start === timeRangeItem.start && selectedTimeRange()?.end === timeRangeItem.end\"\r\n                class=\"date-selector-sidebar-btn\"\r\n              >\r\n                <span class=\"date-selector-sidebar-text\">{{ timeRangeItem.label }}</span>\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </mat-sidenav>\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F\u7ED3\u675F -->\r\n\r\n    <mat-sidenav-content>\r\n      @if (isMobile()) {\r\n        <div class=\"date-selector-mobile-toolbar\">\r\n          <button mat-button (click)=\"sidenav.open()\">\r\n            <span>\u5FEB\u6377\u9009\u62E9</span>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- \u4E3B\u8981\u5185\u5BB9\u533A\u57DF -->\r\n      <div class=\"date-selector-main\">\r\n        <div class=\"date-selector-content\">\r\n          <!-- \u65E5\u5386\u5BB9\u5668 -->\r\n          <section class=\"date-selector-calendar-section\">\r\n            <div class=\"date-selector-calendar-wrapper\">\r\n              <mat-calendar [maxDate]=\"!future() ? now : undefined\" [(selected)]=\"selectedDateRange\" (selectedChange)=\"rangeChanged($event)\" class=\"date-selector-calendar\" />\r\n            </div>\r\n          </section>\r\n          <!-- \u65E5\u5386\u5BB9\u5668\u7ED3\u675F -->\r\n\r\n          <!-- \u65F6\u95F4\u8BBE\u7F6E\u5BB9\u5668 -->\r\n          <section class=\"date-selector-time-section\">\r\n            <!-- \u5F00\u59CB\u548C\u7ED3\u675F\u8F93\u5165\u65E5\u671F -->\r\n            <div class=\"date-selector-inputs\">\r\n              <!-- \u4ECE\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u5F00\u59CB\u65E5\u671F\"\r\n                [dateValue]=\"startDate()\"\r\n                [hourValue]=\"startHour()\"\r\n                (hourChange)=\"startHour.set($event)\"\r\n                [minuteValue]=\"startMinute()\"\r\n                (minuteChange)=\"startMinute.set($event)\"\r\n                [hours]=\"hours\"\r\n                [minutes]=\"minutes\"\r\n                (dateChange)=\"changeDatePart('start', $event)\"\r\n                (timeChange)=\"updateStartTime()\"\r\n              />\r\n\r\n              <!-- \u7ED3\u675F\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u7ED3\u675F\u65E5\u671F\"\r\n                [dateValue]=\"endDate()\"\r\n                [hourValue]=\"endHour()\"\r\n                (hourChange)=\"endHour.set($event)\"\r\n                [minuteValue]=\"endMinute()\"\r\n                (minuteChange)=\"endMinute.set($event)\"\r\n                [hours]=\"hours\"\r\n                [minutes]=\"minutes\"\r\n                (dateChange)=\"changeDatePart('end', $event)\"\r\n                (timeChange)=\"updateEndTime()\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"date-selector-hint-wrapper\">\r\n              <div class=\"date-selector-hint\">\r\n                <i-tabler name=\"info-circle\" strokeWidth=\"2px\" class=\"date-selector-hint-icon\"></i-tabler>\r\n                <span class=\"date-selector-hint-text\">\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002</span>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</date-time-picker-container>\r\n\r\n<ng-template #footerExtraContent>\r\n  <div class=\"date-selector-footer-range\">\r\n    <span class=\"date-selector-footer-label\">\u8303\u56F4\uFF1A</span>\r\n\r\n    @if (startDate()) {\r\n      <div class=\"date-selector-footer-value\">\r\n        @if (startDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayStart() }}</span>\r\n        }\r\n\r\n        @if (startDate() && endDate()) {\r\n          <span class=\"date-selector-footer-separator\">-</span>\r\n        }\r\n\r\n        @if (endDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayEnd() }}</span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.date-selector-sidebar{width:12rem;height:100%;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}.date-selector-sidebar-inner{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center}.date-selector-sidebar-title{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item{margin:0;padding:0}.date-selector-sidebar-btn{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text{display:block}.date-selector-main{width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(max-width:767px){.date-selector-main{height:auto;flex:1}}.date-selector-content{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content{flex-direction:row}}.date-selector-calendar-section{width:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section{width:50%}}@media(max-width:767px){.date-selector-calendar-section{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));padding-top:0;padding-bottom:0}}.date-selector-calendar-wrapper{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar{width:100%}.date-selector-hint{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-hint-wrapper{padding:12px 16px}.date-selector-time-section{width:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-time-section{width:50%}}.date-selector-inputs{display:flex;flex-direction:column;padding:0}.date-selector-footer-range{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label{display:block}}.date-selector-footer-value{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator{display:block}}.date-selector-sidenav-container{width:100%;height:100%;background-color:transparent}.date-selector-mobile-toolbar{padding:8px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;align-items:center}\n", ":host{display:block;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: ['sidenav']
@@ -466,73 +536,60 @@ class DatePickerComponent {
     #dialog;
     #focusMonitor;
     #elementRef;
-    #matFormField;
     #injector;
     // 内部值存储：{start: string, end: string} 或 null/undefined
     #internalValue;
     #errorStateSignal;
-    #shouldLabelFloatSignal;
     #focusedSignal;
     #id;
-    formatDate(date) {
-        const datePart = this._dateAdapter.format(date, this._dateFormats.display.dateInput);
-        const hours = date.getHours().toString().padStart(2, '0');
-        const minutes = date.getMinutes().toString().padStart(2, '0');
-        return `${datePart} ${hours}:${minutes}`;
-    }
     constructor() {
         this.#breakpoints = inject(BreakpointObserver);
         this.#dialog = inject(MatDialog);
         this.#focusMonitor = inject(FocusMonitor);
         this.#elementRef = inject(ElementRef);
-        this.#matFormField = inject(MatFormField, { optional: true });
         this.#injector = inject(Injector);
         this._dateAdapter = inject(DateAdapter);
         this._dateFormats = inject(MAT_DATE_FORMATS);
         this.destroyRef = inject(DestroyRef);
-        this.ngControl = null;
+        this.ngControl = inject(NgControl, { optional: true, self: true });
         this.required = false;
         this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
         this._formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
-        this.valueFormat = 'yyyy-MM-dd HH:mm';
         this.placeholder = '';
         this.future = input(false, ...(ngDevMode ? [{ debugName: "future" }] : []));
+        this.isTimestamp = input(false, ...(ngDevMode ? [{ debugName: "isTimestamp" }] : []));
         this.selectedDateRange = model(...(ngDevMode ? [undefined, { debugName: "selectedDateRange" }] : []));
-        this.toggle = signal(false, ...(ngDevMode ? [{ debugName: "toggle" }] : []));
         this.selectionChange = output();
         // 内部值存储：{start: string, end: string} 或 null/undefined
         this.#internalValue = signal(undefined, ...(ngDevMode ? [{ debugName: "#internalValue" }] : []));
         // MatFormFieldControl 属性
         this.stateChanges = new Subject();
         this.#errorStateSignal = signal(false, ...(ngDevMode ? [{ debugName: "#errorStateSignal" }] : []));
-        this.#shouldLabelFloatSignal = signal(false, ...(ngDevMode ? [{ debugName: "#shouldLabelFloatSignal" }] : []));
         this.#focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "#focusedSignal" }] : []));
         this.#id = signal(`date-time-picker-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "#id" }] : []));
         this.displayStart = computed(() => {
             const range = this.selectedDateRange();
             if (!range?.start)
                 return '';
-            return this.formatDate(range.start);
+            return formatDate(range.start, this._dateAdapter, this._dateFormats);
         }, ...(ngDevMode ? [{ debugName: "displayStart" }] : []));
         this.displayEnd = computed(() => {
             const range = this.selectedDateRange();
             if (!range?.end)
                 return '';
-            return this.formatDate(range.end);
+            return formatDate(range.end, this._dateAdapter, this._dateFormats);
         }, ...(ngDevMode ? [{ debugName: "displayEnd" }] : []));
         this.ref = effect(() => {
-            const dateRange = this.selectedDateRange();
+            this.selectedDateRange();
             // 触发 MatFormField 更新
-            this.stateChanges.next();
-            this.#shouldLabelFloatSignal.set(!!dateRange);
-            // 通知 ControlValueAccessor（当通过 model 更新时）
-            if (dateRange && this.onChange) {
-                const value = this.#internalValue();
-                if (value) {
-                    this.onChange(value);
-                }
-            }
+            untracked(() => this.stateChanges.next());
         }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+            this.ngControl.statusChanges?.pipe(takeUntilDestroyed()).subscribe(() => {
+                this.stateChanges.next();
+            });
+        }
         // 监听 focus 事件
         this.#focusMonitor
             .monitor(this.#elementRef, true)
@@ -555,8 +612,7 @@ class DatePickerComponent {
         const currentValue = this.#internalValue();
         const data = {
             dateTimePicker: currentValue ?? undefined,
-            future: this.future(),
-            valueFormat: this.valueFormat
+            future: this.future()
         };
         const dialogRef = this.#dialog.open(DateSelector, {
             width: isMobile ? '100%' : '850px',
@@ -568,22 +624,31 @@ class DatePickerComponent {
             panelClass: 'date-time-picker-dialog',
             injector: this.#injector
         });
-        dialogRef
-            .afterOpened()
-            .pipe(take(1), takeUntilDestroyed(this.destroyRef), tap(() => this.toggle.update((status) => !status)))
-            .subscribe();
         dialogRef
             .afterClosed()
             .pipe(take(1), takeUntilDestroyed(this.destroyRef), tap((result) => {
-            this.toggle.update((status) => !status);
             if (result && result.dateTimePicker) {
+                const start = new Date(result.dateTimePicker.start);
+                const end = new Date(result.dateTimePicker.end);
+                let startVal;
+                let endVal;
+                if (this.isTimestamp()) {
+                    start.setSeconds(0, 0);
+                    end.setSeconds(0, 0);
+                    startVal = start.getTime();
+                    endVal = end.getTime();
+                }
+                else {
+                    startVal = formatDate(start, this._dateAdapter, this._dateFormats);
+                    endVal = formatDate(end, this._dateAdapter, this._dateFormats);
+                }
                 const rangeValue = {
-                    start: result.dateTimePicker.start,
-                    end: result.dateTimePicker.end
+                    start: startVal,
+                    end: endVal
                 };
                 this.#internalValue.set(rangeValue);
                 // 更新显示用的日期范围
-                this.selectedDateRange.set(new DateRange(new Date(result.dateTimePicker.start), new Date(result.dateTimePicker.end)));
+                this.selectedDateRange.set(new DateRange(start, end));
                 // 发出用户手动选择的值
                 this.selectionChange.emit(rangeValue);
                 // 通知表单控件
@@ -635,16 +700,16 @@ class DatePickerComponent {
         return !this.#internalValue();
     }
     get shouldPlaceholderFloat() {
-        return this.#shouldLabelFloatSignal();
+        return this.shouldLabelFloat;
     }
     get focused() {
         return this.#focusedSignal();
     }
     get errorState() {
-        return this.#errorStateSignal();
+        return this.#errorStateSignal() || (!!this.ngControl?.invalid && (!!this.ngControl?.touched || !!this.ngControl?.dirty));
     }
     get shouldLabelFloat() {
-        return this.#shouldLabelFloatSignal();
+        return this.focused || !this.empty;
     }
     get id() {
         return this.#id();
@@ -680,13 +745,8 @@ class DatePickerComponent {
         this.stateChanges.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DatePickerComponent, isStandalone: true, selector: "date-time-picker", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: false, isRequired: false, transformFunction: null }, dateTimePicker: { classPropertyName: "dateTimePicker", publicName: "dateTimePicker", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, future: { classPropertyName: "future", publicName: "future", isSignal: true, isRequired: false, transformFunction: null }, selectedDateRange: { classPropertyName: "selectedDateRange", publicName: "selectedDateRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedDateRange: "selectedDateRangeChange", selectionChange: "selectionChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DatePickerComponent, isStandalone: true, selector: "date-time-picker", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, future: { classPropertyName: "future", publicName: "future", isSignal: true, isRequired: false, transformFunction: null }, isTimestamp: { classPropertyName: "isTimestamp", publicName: "isTimestamp", isSignal: true, isRequired: false, transformFunction: null }, selectedDateRange: { classPropertyName: "selectedDateRange", publicName: "selectedDateRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedDateRange: "selectedDateRangeChange", selectionChange: "selectionChange" }, providers: [
             provideTablerIcons({ IconCalendarDue, IconX }),
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DatePickerComponent),
-                multi: true
-            },
             {
                 provide: MatFormFieldControl,
                 useExisting: forwardRef(() => DatePickerComponent)
@@ -697,11 +757,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             type: Component,
             args: [{ selector: 'date-time-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TablerIconComponent, MatDatepickerModule, MatDialogModule], providers: [
                         provideTablerIcons({ IconCalendarDue, IconX }),
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatePickerComponent),
-                            multi: true
-                        },
                         {
                             provide: MatFormFieldControl,
                             useExisting: forwardRef(() => DatePickerComponent)
@@ -712,152 +767,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: ['dateRangeButton']
             }], required: [{
                 type: Input
-            }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueFormat: [{
-                type: Input
-            }], dateTimePicker: [{
-                type: Input
-            }], placeholder: [{
+            }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{
                 type: Input
-            }], future: [{ type: i0.Input, args: [{ isSignal: true, alias: "future", required: false }] }], selectedDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDateRange", required: false }] }, { type: i0.Output, args: ["selectedDateRangeChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
-
-class SmartDialogService {
-    constructor() {
-        this.#dialog = inject(MatDialog);
-        this.#bottomSheet = inject(MatBottomSheet);
-        this.#breakpoints = inject(BreakpointObserver);
-        this.ref = null;
-        this.data = null;
-    }
-    #dialog;
-    #bottomSheet;
-    #breakpoints;
-    open(component, config = {}) {
-        const isMobile = this.#breakpoints.isMatched([
-            Breakpoints.Handset,
-            Breakpoints.Tablet
-        ]);
-        const smartRef = new SmartDialogRef({});
-        this.data = config.data;
-        if (isMobile) {
-            this.ref = this.#bottomSheet.open(component, {
-                ariaLabel: 'Bottomsheet',
-                ariaModal: true,
-                autoFocus: false,
-                data: config.data,
-                panelClass: config.panelClass,
-                disableClose: config.disableClose
-            });
-            Promise.resolve().then(() => {
-                const hostElement = this.ref?.containerInstance?._elementRef?.nativeElement;
-                const container = hostElement?.closest('.mat-bottom-sheet-container');
-                if (container) {
-                    if (config.width)
-                        container.style.width = config.width;
-                    if (config.height)
-                        container.style.height = config.height;
-                    if (config.maxWidth)
-                        container.style.maxWidth = config.maxWidth;
-                    container.style.minWidth = 'unset';
-                    container.style.maxHeight = 'unset';
-                    container.style.borderTopLeftRadius = '1rem';
-                    container.style.borderTopRightRadius = '1rem';
-                }
-                if (hostElement) {
-                    if (config.width)
-                        hostElement.style.width = config.width;
-                    if (config.maxWidth)
-                        hostElement.style.maxWidth = config.maxWidth;
-                    if (config.height)
-                        hostElement.style.height = config.height;
-                }
-            });
-            smartRef.ref = this.ref;
-        }
-        else {
-            this.ref = this.#dialog.open(component, {
-                data: config.data,
-                ariaLabel: 'Dialog',
-                ariaModal: true,
-                autoFocus: false,
-                panelClass: config.panelClass,
-                disableClose: config.disableClose,
-                width: config.width,
-                height: config.height,
-                maxWidth: config.maxWidth,
-            });
-            const hostElement = this.ref._containerInstance?._elementRef?.nativeElement;
-            const container = hostElement?.closest('.mat-mdc-dialog-panel');
-            if (container) {
-                if (config.width)
-                    container.style.width = config.width;
-                if (config.height)
-                    container.style.height = config.height;
-                if (config.maxWidth) {
-                    container.style.maxWidth = config.maxWidth;
-                }
-                else {
-                    container.style.maxWidth = 'unset';
-                }
-                container.style.minWidth = 'unset';
-                container.style.maxHeight = 'unset';
-            }
-            smartRef.ref = this.ref;
-        }
-        return smartRef;
-    }
-    getData() {
-        return this.data;
-    }
-    close(result) {
-        if (!this.ref)
-            return;
-        if ('close' in this.ref) {
-            this.ref.close(result);
-        }
-        else {
-            this.ref.dismiss(result);
-        }
-        this.clear();
-    }
-    clear() {
-        this.ref = null;
-        this.data = null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SmartDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SmartDialogService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SmartDialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class SmartDialogRef {
-    constructor(ref) {
-        this.ref = ref;
-    }
-    close(result) {
-        if ('close' in this.ref) {
-            this.ref.close(result);
-        }
-        else {
-            this.ref.dismiss(result);
-        }
-    }
-    afterOpened() {
-        return this.ref.afterOpened();
-    }
-    afterClosed() {
-        if ('afterClosed' in this.ref) {
-            return this.ref.afterClosed();
-        }
-        else {
-            return this.ref.afterDismissed();
-        }
-    }
-}
+            }], future: [{ type: i0.Input, args: [{ isSignal: true, alias: "future", required: false }] }], isTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTimestamp", required: false }] }], selectedDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDateRange", required: false }] }, { type: i0.Output, args: ["selectedDateRangeChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DatePickerComponent, DateSelector, SmartDialogRef, SmartDialogService };
+export { DatePickerComponent, DateSelector, formatDate };
 //# sourceMappingURL=luoxiao123-angular-material-date-time-range-picker.mjs.map