iView開始結束時間組件

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

 

測試頁面文件：

 1 <template>
 2   <div>
 3     <startEndTime @newEndTime="newEndTimeData" :startEndTimeData="timeDataObj"></startEndTime>
 4     <div style="text-align:center"> 選擇的時間是：{{endTimeDate}}</div>
 5   </div>
 6 </template>
 7 <script>
 8 
 9 import startEndTime from "../components/startEndTime.vue"
10 
11 export default {
12   name: "text-template",
13   data() {
14     return {
15       endTimeDate: "",
16       timeDataObj: {
17         timeName: "日期區間", // 日期名稱
18         timeType: "datetimerange", // 類型：date、daterange、datetime、datetimerange、year、month
19         timeShortcuts: { // 顯示左邊內容，不傳不顯示
20           shortcuts: [
21             {
22               text: "最近一週",
23               value() {
24                 const end = new Date();
25                 const start = new Date();
26                 start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
27                 return [start, end];
28               }
29             },
30             {
31               text: "最近一個月",
32               value() {
33                 const end = new Date();
34                 const start = new Date();
35                 start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
36                 return [start, end];
37               }
38             }
39           ],
40         },
41         timeFormat: "yyyy-MM-dd HH:mm:ss", // 時間格式
42         timeModel: "", //
43       }
44     };
45   },
46   methods: {
47     newEndTimeData(val){
48       this.endTimeDate = val
49     }
50   },
51   components: {
52     startEndTime
53   }
54 };
55 </script>

開始結束日期組件 startEndTime.vue

 1 <template>
 2 <div style="width:353px;margin:50px auto">
 3     <Row>
 4         <Col span="24">
 5             {{startEndTimeData.timeName || '時間'}}
 6             <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>
 7         </Col>
 8     </Row>
 9 </div>
10 </template>
11 <script>
12 export default {
13   data() {
14     return {
15     };
16   },
17   props: {
18     startEndTimeData: Object
19   },
20   methods: {
21     changeEndTime(val){
22       this.$emit("newEndTime",val)
23     }
24   }
25 };
26 </script>