update: 时间选择器 -u2

src/components/app-date-range/app-date-range.scss

-.app-date-range{
-  display: block;
+
+// 带时间
+.app-date-range--datetime{
+  min-width: 333px;
 }
 
+// 不带时间
+.app-date-range--date{
+  min-width: 210px;
+}
\ No newline at end of file

src/components/app-date-range/app-date-range.vue

 <template>
-    <date-picker></date-picker>
+  <date-picker
+    :class="['app-date-range', 'app-date-range--' + type]"
+    :type="rangeType"
+    :value="realVal"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    transfer
+    @on-change="onChange"
+    @on-open-change="onOpenChange"
+  ></date-picker>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 @Component({})
 export default class AppDateRange extends Vue {
+  /**
+   * 是否禁用
+   *
+   * @type {string}
+   * @memberof AppDateRange
+   */
+  @Prop({ default: false }) public disabled?: boolean;
 
   /**
-     * 当前值
+   * placeholder
    *
-     * @type {*}
-     * @memberof AppSpan
+   * @type {string}
+   * @memberof AppDateRange
+   */
+  @Prop({ default: "请选择时间" }) public placeholder?: string;
+
+  /**
+   * 日期值格式化
+   *
+   * @type {string}
+   * @memberof AppDateRange
    */
-    @Prop() public value?: any;
+  @Prop() public valueFormat?: string;
 
   /**
    * 数据类型
    *
    * @type {string}
-     * @memberof AppSpan
+   * @memberof AppDateRange
    */
-    @Prop({default: 'datetime'}) public type?: 'datetime' | 'date';
+  @Prop({ default: "datetime" }) public type?: "datetime" | "date";
 
   /**
-     * 是否禁用
+   * 开始属性名称
    *
    * @type {string}
-     * @memberof AppSpan
+   * @memberof AppDateRange
    */
-    @Prop({default: false}) public disabled?: boolean;
+  @Prop() public startField?: string;
 
   /**
-     * 日期值格式化
+   * 结束属性名称
    *
    * @type {string}
-     * @memberof AppSpan
+   * @memberof AppDateRange
    */
-    @Prop() public valueFormat?: string;
+  @Prop() public endField?: string;
 
   /**
    * 传入表单数据
    *
    * @type {*}
-     * @memberof AppSpan
+   * @memberof AppDateRange
    */
   @Prop() public data?: any;
 
+  /**
+   * 实际组件维护的值
+   *
+   * @type {*}
+   * @memberof AppDateRange
+   */
+  public realVal: any[] = [];
+
+  /**
+   * 是否修改过数据
+   * @type {boolean}
+   * @memberof AppDateRange
+   */
+  public modified: boolean = false;
+
+  /**
+   * iview组件类型`
+   *
+   * @type {string}
+   * @memberof AppDateRange
+   */
+  get rangeType() {
+    switch (this.type) {
+      case "date":
+        return "daterange";
+      default:
+        return "datetimerange";
+    }
+  }
+
+  /**
+   * 生命周期
+   *
+   * @type {string}
+   * @memberof AppDateRange
+   */
+  created() {
+    if (!this.startField) {
+      this.$Notice.error({
+        title: this.$t("app.commonWords.wrong") as string,
+        desc: "没有配置开始属性",
+      });
+    }
+    if (!this.endField) {
+      this.$Notice.error({
+        title: this.$t("app.commonWords.wrong") as string,
+        desc: "没有配置结束属性",
+      });
+    }
+  }
+
   /**
    * 监控表单属性 data 值
    *
-     * @memberof AppSpan
+   * @memberof AppDateRange
    */
-    @Watch('data')
+  @Watch("data", { deep: true, immediate: true })
   onDataChange(newVal: any, oldVal: any) {
-        if(newVal !== oldVal){
-           console.log(newVal);
+    if (newVal && this.startField && this.endField) {
+      this.realVal = [newVal[this.startField], newVal[this.endField]];
+      this.modified = false;
+      console.log(this.realVal);
+    }
+  }
+
+  /**
+   * iview组件值变更事件（只更新realVal,不抛出）
+   *
+   * @memberof AppDateRange
+   */
+  onChange(values: any[]) {
+    this.realVal = values;
+    this.modified = true;
+    if(values[0]==='' && values[1] === ''){
+      //清空的情况，直接抛值，openChange会先触发，或不触发。
+      this.$emit("change", this.startField!, null);
+      this.$emit("change", this.endField!, null);
     }
   }
 
+  /**
+   * iview组件值关闭事件（如果数据有变更，则抛出change事件）
+   *
+   * @memberof AppDateRange
+   */
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen && this.modified) {
+      const [start, end] = this.realVal;
+      this.$emit("change", this.startField!, start);
+      this.$emit("change", this.endField!, end);
+    }
+  }
 }
 </script>
 
-<style lang='scss'>
-@import './app-date-range.scss';
+<style lang="scss">
+@import "./app-date-range.scss";
 </style>