日期和时间编辑OK了

Author: zgwit

src/app/lib/smart-date-picker/smart-date-picker.html

@@ -0,0 +1,17 @@
+@switch(mode){
+  @case ('datetime') {
+  <!--日期和时间-->
+  <nz-date-picker nzAllowClear nzShowTime [ngModel]="value" (ngModelChange)="onModelChange($event)" [nzDisabled]="disabled"></nz-date-picker>
+  }
+  @case ('date') {
+  <!--日期-->
+  <nz-date-picker nzAllowClear [ngModel]="value" (ngModelChange)="onModelChange($event)" [nzDisabled]="disabled"></nz-date-picker>
+  }
+  @case ('time') {
+  <!--时间-->
+  <nz-time-picker nzAllowClear [ngModel]="value" (ngModelChange)="onModelChange($event)" [nzDisabled]="disabled"></nz-time-picker>
+  }
+  @default {
+    <p>不支持的类型</p>
+  }
+}

src/app/lib/smart-date-picker/smart-date-picker.scss

@@ -0,0 +1,72 @@
+import {Component, forwardRef, Input} from '@angular/core';
+import {ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule} from '@angular/forms';
+import {NzTimePickerComponent} from 'ng-zorro-antd/time-picker';
+import {NzDatePickerComponent} from 'ng-zorro-antd/date-picker';
+import dayjs from 'dayjs';
+import {CommonModule} from '@angular/common';
+
+@Component({
+  selector: 'smart-date-picker',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NzDatePickerComponent,
+    NzTimePickerComponent,
+  ],
+  templateUrl: './smart-date-picker.html',
+  styleUrl: './smart-date-picker.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SmartDatePicker),
+      multi: true
+    }
+  ]
+})
+export class SmartDatePicker implements ControlValueAccessor {
+  @Input() mode = "datetime"
+
+  formats: any = {
+    datetime: 'YYYY-MM-DD HH:mm:ss',
+    date: 'YYYY-MM-DD',
+    time: 'HH:mm:ss',
+  }
+
+  value: Date = new Date()
+  disabled = false
+
+  writeValue(obj: any): void {
+    if (obj) {
+      if (this.mode == "time")
+        this.value = dayjs("2000-01-01 " + obj).toDate();
+      else
+        this.value = dayjs(obj).toDate();
+    }
+  }
+
+  onChange = (val: string) => {
+  };
+  onTouched = () => {
+  };
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled
+  }
+
+  onModelChange($event: any) {
+    let fmt = this.formats[this.mode]
+    this.onChange(dayjs($event).format(fmt))
+    this.onTouched()
+  }
+
+}

src/app/lib/smart-date-picker/smart-date-picker.ts

@@ -116,16 +116,15 @@
     }
     @case ('datetime') {
       <!--日期和时间-->
-      <nz-date-picker nzShowTime [formControl]="control" [nzAllowClear]="field.clear || false"
-      [nzPlaceHolder]="field.placeholder || ''"></nz-date-picker>
+      <smart-date-picker [formControl]="control" mode="datetime"></smart-date-picker>
     }
     @case ('date') {
       <!--日期-->
-      <nz-date-picker [formControl]="control" [nzAllowClear]="field.clear || false" [nzPlaceHolder]="field.placeholder || ''"></nz-date-picker>
+      <smart-date-picker [formControl]="control" mode="date"></smart-date-picker>
     }
     @case ('time') {
       <!--时间-->
-      <nz-time-picker [formControl]="control"  [nzPlaceHolder]="field.placeholder || ''"></nz-time-picker>
+      <smart-date-picker [formControl]="control" mode="time"></smart-date-picker>
     }
     @case ('file') {
       <!--文件-->

src/app/lib/smart-editor/smart-editor.component.html

@@ -16,12 +16,10 @@ import {CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray} from
 import {NzInputDirective, NzInputGroupComponent, NzTextareaCountComponent} from "ng-zorro-antd/input";
 import {NzButtonComponent} from "ng-zorro-antd/button";
 import {NzColorPickerModule} from "ng-zorro-antd/color-picker";
-import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
 import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
 import {NzSelectComponent} from "ng-zorro-antd/select";
 import {NzSliderComponent} from "ng-zorro-antd/slider";
 import {NzSwitchComponent} from "ng-zorro-antd/switch";
-import {NzTimePickerComponent} from "ng-zorro-antd/time-picker";
 import {NzTreeSelectComponent} from "ng-zorro-antd/tree-select";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzSpaceModule} from "ng-zorro-antd/space";
@@ -30,6 +28,8 @@ import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
 import {NzRadioModule} from "ng-zorro-antd/radio";
 import {NzRateComponent} from "ng-zorro-antd/rate";
 import {SmartAction} from '../smart-table/smart-table.component';
+import {SmartDatePicker} from '../smart-date-picker/smart-date-picker';
+import dayjs from 'dayjs';
 
 
 export interface SmartAutoOption {
@@ -149,11 +149,11 @@ function getDefault(field: SmartField): any {
     case 'textarea':
       return ''
     case 'date':
-      return new Date()
+      return dayjs().format("YYYY-MM-DD")
     case 'time':
-      return new Date()
+      return dayjs().format("HH:mm:ss")
     case 'datetime':
-      return new Date()
+      return dayjs().format("YYYY-MM-DD HH:mm:ss")
     case 'file':
       return ''
     case 'image':
@@ -222,14 +222,12 @@ export function createControl(f: SmartField, value: any = undefined): FormContro
     NzInputDirective,
     NzButtonComponent,
     NzColorPickerModule,
-    NzDatePickerComponent,
     NzInputGroupComponent,
     NzInputNumberComponent,
     NzSelectComponent,
     NzSliderComponent,
     NzSwitchComponent,
     NzTextareaCountComponent,
-    NzTimePickerComponent,
     NzTreeSelectComponent,
     NzUploadComponent,
     CdkDragHandle,
@@ -239,6 +237,7 @@ export function createControl(f: SmartField, value: any = undefined): FormContro
     NzCheckboxComponent,
     NzRadioModule,
     NzRateComponent,
+    SmartDatePicker,
   ],
   templateUrl: './smart-editor.component.html',
   styleUrl: './smart-editor.component.scss',