iView开始结束时间组件

演示地址：https://run.iviewui.com/TGIKGkIt

测试页面文件：

<template>
  <div>
    <startEndTime @newEndTime="newEndTimeData" :startEndTimeData="timeDataObj"></startEndTime>
    <div style="text-align:center"> 选择的时间是：{{endTimeDate}}</div>
  </div>
</template>
<script>

import startEndTime from "../components/startEndTime.vue"

export default {
  name: "text-template",
  data() {
    return {
      endTimeDate: "",
      timeDataObj: {
        timeName: "日期区间", // 日期名称
        timeType: "datetimerange", // 类型：date、daterange、datetime、datetimerange、year、month
        timeShortcuts: { // 显示左边内容，不传不显示
          shortcuts: [
            {
              text: "最近一周",
              value() {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                return [start, end];
              }
            },
            {
              text: "最近一个月",
              value() {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                return [start, end];
              }
            }
          ],
        },
        timeFormat: "yyyy-MM-dd HH:mm:ss", // 时间格式
        timeModel: "", //
      }
    };
  },
  methods: {
    newEndTimeData(val){
      this.endTimeDate = val
    }
  },
  components: {
    startEndTime
  }
};
</script>

开始结束日期组件 startEndTime.vue

<template>
<div style="353px;margin:50px auto">
    <Row>
        <Col span="24">
            {{startEndTimeData.timeName || '时间'}}
            <DatePicker v-model="startEndTimeData.timeModel" :type="startEndTimeData.timeType || 'date'" @on-change="changeEndTime" :options="startEndTimeData.timeShortcuts" :format="startEndTimeData.timeFormat || 'yyyy-MM-dd HH:mm'" placeholder="开始结束时间" style=" 300px"></DatePicker>
        </Col>
    </Row>
</div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  props: {
    startEndTimeData: Object
  },
  methods: {
    changeEndTime(val){
      this.$emit("newEndTime",val)
    }
  }
};
</script>