iview裡面時間選擇器(預設當月1號到至今)
阿新 • • 發佈:2018-11-22
<template> <div> <DatePicker type="date" :options="options3" :value="beginTime" @on-change="beginTimeChange" placeholder="開始時間" style="width: 150px"> </DatePicker> <span> - </span> <DatePicker type="date" :options="options3" :value="endTime" @on-change="endTimeChange" placeholder="結束時間" style="width: 150px"> </DatePicker> <Button type="info" :loading="loading3" @click="queryReportList"> <span v-if="!loading3">查詢</span> <span v-else>查詢</span> </Button> </div> </template> <script> export default{ data(){ return{ loading3:false, beginTime:"", endTime: "", options3: { disabledDate(date) { return date && date.valueOf() > Date.now(); } } } }, methods:{ beginTimeChange(value, data) { this.beginTime = value; }, endTimeChange(value, data) { this.endTime = value; }, timeFormat(date, num) { let y = date.getFullYear(); //年 let m = date.getMonth() + 1; //月 let d = date.getDate(); //日 if (num == 1) { d = date.getDate(); } m = m < 10 ? "0" + m : m; d = d < 10 ? "0" + d : d; return y + "-" + m + "-" + d; }, //彈出層效果加驗證 queryReportList(){ let date1 = Date.parse(new Date(this.beginTime)) / 1000; let date2 = Date.parse(new Date(this.endTime)) / 1000; if (date1 > date2) { this.$Modal.warning({ title: "提示", content: "<p>開始時間不得大於結束時間</p>" }); return false; } } }, mounted() { var date = new Date(); this.endTime = this.timeFormat(date, 1); date.setDate(1); this.beginTime = this.timeFormat(date, 0); this.queryReportList(); } } </script> <style> </style>
預設當月一號到當天的前一天
<template> <div> <DatePicker type="date" :options="options3" :value="beginTime" @on-change="beginTimeChange" placeholder="開始時間" style="width: 150px"> </DatePicker> <span> - </span> <DatePicker type="date" :options="options3" :value="endTime" @on-change="endTimeChange" placeholder="結束時間" style="width: 150px"> </DatePicker> <Button type="info" :loading="loading3" @click="queryReportList"> <span v-if="!loading3">查詢</span> <span v-else>查詢</span> </Button> </div> </template> <script> export default{ data(){ return{ loading3:false, beginTime:"", endTime: "", getdate:"", options3: { disabledDate(date) { return date && date.valueOf() > Date.now(); } } } }, methods:{ beginTimeChange(value, data) { this.beginTime = value; }, endTimeChange(value, data) { this.endTime = value; }, //彈出層效果加驗證 queryReportList(){ let date1 = Date.parse(new Date(this.beginTime)) / 1000; let date2 = Date.parse(new Date(this.endTime)) / 1000; if (date1 > date2) { this.$Modal.warning({ title: "提示", content: "<p>開始時間不得大於結束時間</p>" }); return false; } } }, mounted() { var myDate = new Date(); var year = myDate.getFullYear(); var month = myDate.getMonth()+1 //獲取當前月份(0-11,0代表1月,所以要加1); var day = myDate.getDate();//獲取當前日(1-31) if (month<10) { month = "0" + month; } if (day >= 0 && day <= 9) { if (day == 1) { month = myDate.getMonth() if(month==0) { month=12; year=year-1; } day = new Date(year, month, 0).getDate (); } else { // day = day < 10 ? "0" + (day-1) : (day-1);當日的前一天 // day = day < 10 ? "0" + day : day 當日 } } this.beginTime = year+'-'+month + "-" + "01"; this.endTime = year+"-"+month + "-" + day; this.queryBusiness(() => { this.queryReportList() }) this.queryReportList(); } } </script> <style> </style>