edit

src/app/shared/widget/sl-form-item-date/sl-form-item-date.widget.html

@@ -0,0 +1,11 @@
+<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
+  <div style="justify-content: space-between;display: flex;align-items: center;">
+    <nz-date-picker style="min-width: 45%;" [nzFormat]="format" [nzPlaceHolder]="placeholder" [nzShowTime]="nzShowTime"
+      (ngModelChange)="change($event,'start')" [ngModel]="data?.start">
+    </nz-date-picker>
+    -
+    <nz-date-picker style="min-width: 45%; " [nzFormat]="format" [nzPlaceHolder]="placeholder" [nzShowTime]="nzShowTime"
+      (ngModelChange)="change($event,'end')" [ngModel]="data?.end">
+    </nz-date-picker>
+  </div>
+</sf-item-wrap>

src/app/shared/widget/sl-form-item-date/sl-form-item-date.widget.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup, Validators } from '@angular/forms';
+import { ControlWidget } from '@delon/form';
+import { _HttpClient } from '@delon/theme';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import setHours from 'date-fns/setHours';
+import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker';
+@Component({
+  selector: 'sf-item-date',
+  templateUrl: './sl-form-item-date.widget.html',
+  styleUrls: ['./sl-form-item-date.widget.less']
+})
+export class SFItemDateWidget extends ControlWidget implements OnInit {
+  /* 用于注册小部件 KEY 值 */
+  static readonly KEY = 'item-date';
+
+  // 组件所需要的参数，建议使用 `ngOnInit` 获取
+  format: any;
+  placeholder: string = '';
+  nzShowTime = false;
+
+  data: any = {
+    start: null,
+    end: null
+  };
+
+  ngOnInit(): void {
+    this.format = this.ui.format || 'yyyy-mm-dd';
+    this.placeholder = this.ui.placeholder || '';
+    this.nzShowTime = this.ui.nzShowTime || false;
+    this.data = this.value;
+  }
+
+  // reset 可以更好的解决表单重置过程中所需要的新数据问题
+  reset(value: string) {}
+
+  change(value: Date, key: string) {
+    if (this.data) {
+      this.data[key] = value;
+    } else {
+      this.data = { [key]: value };
+    }
+    if (this.ui.change) this.ui.change(this.data);
+    this.setValue(this.data);
+  }
+}

src/app/shared/widget/st-widget.module.ts

@@ -30,6 +30,7 @@ import { EAFromToWidget } from './from-to/from-to.widget';
 import { ImgWidget } from './img/img.widget';
 import { NounWidget } from './noun/noun.widget';
 import { PropertyValuesWidget } from './property-values/property-values.widget';
+import { SFItemDateWidget } from './sl-form-item-date/sl-form-item-date.widget';
 import { SpecValuesWidget } from './spec-values/spec-values.widget';
 import { TinymceWidget } from './tinymce/tinymce.widget';
 
@@ -43,7 +44,8 @@ export const STWIDGET_COMPONENTS = [
   SpecValuesWidget,
   PropertyValuesWidget,
   SLFromToSearchWidget,
-  DictSelectWidget
+  DictSelectWidget,
+  SFItemDateWidget
 ];
 
 @NgModule({
@@ -78,6 +80,7 @@ export class STWidgetModule {
     widgetRegistry.register(SpecValuesWidget.KEY, SpecValuesWidget);
     widgetRegistry.register(PropertyValuesWidget.KEY, PropertyValuesWidget);
     widgetRegistry.register(SLFromToSearchWidget.KEY, SLFromToSearchWidget);
-    widgetRegistry.register(DictSelectWidget.KEY, DictSelectWidget)
+    widgetRegistry.register(DictSelectWidget.KEY, DictSelectWidget);
+    widgetRegistry.register(SFItemDateWidget.KEY, SFItemDateWidget);
   }
 }