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="width: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="width: 300px"></DatePicker>
         </Col>
     </Row>
 </div>
 </template>
 <script>
 export default {
   data() {
     return {
     };
   },
   props: {
     startEndTimeData: Object
   },
   methods: {
     changeEndTime(val){
       this.$emit("newEndTime",val)
     }
   }
 };
 </script>