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>
