<template> <div> <div class='time-title'>快速搜索</div> <div class='k-select'> <span v-for='item of days' @click='calcTime(item)' :key='item.value'> {{ item.name }} </span> </div> <div class='time-title'>日期选择</div> <div class='date-option'> <div class='date-div'> <i class='iconfont green'></i> <div class='date-bg0' @click='showTwoDate(1)'> {{ oneDate | dateformat }} </div> <div class='date-bg1'>至</div> <div class='date-bg2' @click='showTwoDate(2)'> {{ twoDate | dateformat }} </div> <span class='refresh green' @click='handleReset'></span> </div> <div class='btn-div' v-if='dateOneVisible===false&&dateTwoVisible===false'> <button class='cz' @click='handleReset'>重置</button> <button class='qd' @click="$emit('confirm', {oneDate, twoDate, timeStr})">确定</button> </div> </div> <van-datetime-picker style="margin-top: .5rem" v-if='dateOneVisible' v-model='oneDate' type='date' :min-date='minDate' :max-date='maxDate' :item-height='`.7rem`' :show-toolbar='false' @confirm='onConfirm1' @cancel='onCanceld' @change='changeOne' ref='van_picker' > <template #confirm >  </template> <template #cancel >  </template> <template #columns-top> </template> <template #columns-bottom> <div class='bot-btn'> <button class='cz' @click='dateOneVisible = false'>取消</button> <button class='qd' @click='onConfirmNewOne'>确定</button> </div> </template> </van-datetime-picker> <van-datetime-picker v-if='dateTwoVisible' v-model='twoDate' type='date' :min-date='minDate' :max-date='maxDate' :item-height='`.7rem`' :show-toolbar='false' @confirm='onConfirm2' @cancel='onCanceld' @change='changeTwo' ref='van_picker2' > <template #confirm >  </template> <template #cancel >  </template> <template #columns-top> </template> <template #columns-bottom> <div class='bot-btn'> <button class='cz' @click='dateTwoVisible = false'>取消</button> <button class='qd' @click='onConfirmNewTwo'>确定</button> </div> </template> </van-datetime-picker> </div> </template> <script> import moment from 'moment'; import { Notify } from 'vant'; export default { name: 'dateControl', data() { return { dataType: '', // 财年 goldStart: '', // 改变的日期 currentSelectTime: '', oneDate: new Date(), twoDate: new Date(), // 最小日期 minDate: new Date(2018, 0, 1), // 最大日期 maxDate: new Date(), // 快捷时间选择 days: [ { value: 1, name: '近7天' }, { value: 2, name: '近30天' }, { value: 3, name: '近60天' }, { value: 4, name: '近90天' }, { value: 5, name: '上一月' }, { value: 6, name: '上两月' }, { value: 7, name: '当月' }, { value: 8, name: '今年' } ], timeStr: '当月', dateOneV: false, dateOneVisible: false, dateTwoVisible: false, oneTwoheight: '45%' }; }, watch: { dateOneVisible(nv) { if (nv === false) { this.$emit('changeHeight', '45%'); } }, dateTwoVisible(nv) { if (nv === false) { this.$emit('changeHeight', '45%'); } } }, methods: { init() { }, handleReset() { this.twoDate = new Date(); this.oneDate = moment(moment().format('YYYY-MM') + '-01') this.timeStr = '当月'; this.dateOneV = false; this.init(); }, showTwoDate(val) { if (+val === 1) { sessionStorage.setItem('oneDate', this.oneDate); this.dateOneVisible = true; this.dateTwoVisible = false; setTimeout(() => { this.oneTwoheight = '85%'; this.$emit('changeHeight', this.oneTwoheight); }, 30); } else { sessionStorage.setItem('twoDate', this.twoDate); this.dateTwoVisible = true; this.dateOneVisible = false; setTimeout(() => { this.oneTwoheight = '85%'; this.$emit('changeHeight', this.oneTwoheight); }, 30); } }, // 选择全年 1 allYearOne() { this.$nextTick(() => { // console.log(this.$refs.van_picker.getPicker()) this.$refs.van_picker.getPicker().setColumnIndex([1], 0); this.$refs.van_picker.getPicker().setColumnIndex([2], 0); console.log(this.$refs.van_picker.getPicker().getValues()); let yearData = this.$refs.van_picker.getPicker().getValues(); this.oneDate = new Date(yearData[0], 0, 1); this.twoDate = new Date(yearData[0], 11, 31); sessionStorage.setItem('oneDate', this.oneDate); sessionStorage.setItem('twoDate', this.twoDate); this.dateOneVisible = false; this.dateOneV = false; this.checked = true; this.yearType = '自然年'; this.isCalendarYear = true; this.dataType = 8; this.init(); }); }, // 选择全月 1 allMonthOne() { this.$nextTick(() => { // console.log(this.$refs.van_picker.getPicker()) this.$refs.van_picker.getPicker().setColumnIndex([1], 0); this.$refs.van_picker.getPicker().setColumnIndex([2], 0); console.log(this.$refs.van_picker.getPicker().getValues()); let yearData = this.$refs.van_picker.getPicker().getValues(); this.oneDate = new Date(yearData[0], +yearData[1] - 1, 1); let day = this.getDuration(yearData[0], yearData[1]); let currentMonth = moment(this.oneDate).format('YYYYMM'); if (+currentMonth === +moment(new Date()).format('YYYYMM')) { this.twoDate = new Date(); } else { this.twoDate = new Date(yearData[0], +yearData[1] - 1, day); } sessionStorage.setItem('oneDate', this.oneDate); sessionStorage.setItem('twoDate', this.twoDate); this.dateOneVisible = false; this.dateOneV = false; this.checked = false; this.yearType = '自然年'; this.isCalendarYear = true; this.dataType = 7; this.init(); }); }, // 选择全年 2 allYearTwo() { this.$nextTick(() => { // console.log(this.$refs.van_picker.getPicker()) this.$refs.van_picker.getPicker().setColumnIndex([1], 0); this.$refs.van_picker.getPicker().setColumnIndex([2], 0); console.log(this.$refs.van_picker2.getPicker().getValues()); let yearData = this.$refs.van_picker2.getPicker().getValues(); this.oneDate = new Date(yearData[0], 0, 1); this.twoDate = new Date(yearData[0], 11, 31); sessionStorage.setItem('oneDate', this.oneDate); sessionStorage.setItem('twoDate', this.twoDate); this.dateTwoVisible = false; this.checked = true; this.yearType = '自然年'; this.isCalendarYear = true; this.dataType = 8; this.init(); }); }, // 选择全月 2 allMonthTwo() { this.$nextTick(() => { // console.log(this.$refs.van_picker.getPicker()) this.$refs.van_picker.getPicker().setColumnIndex([1], 0); this.$refs.van_picker.getPicker().setColumnIndex([2], 0); console.log(this.$refs.van_picker2.getPicker().getValues()); let yearData = this.$refs.van_picker2.getPicker().getValues(); this.oneDate = new Date(yearData[0], +yearData[1] - 1, 1); let day = this.getDuration(yearData[0], yearData[1]); let currentMonth = moment(this.twoDate).format('YYYYMM'); if (+currentMonth === +moment(new Date()).format('YYYYMM')) { this.twoDate = new Date(); } else { this.twoDate = new Date(yearData[0], +yearData[1] - 1, day); } sessionStorage.setItem('oneDate', this.oneDate); sessionStorage.setItem('twoDate', this.twoDate); this.dateTwoVisible = false; this.checked = false; this.yearType = '自然年'; this.isCalendarYear = true; this.dataType = 7; this.init(); }); }, // 7 30 60 90 天查询 calcTime(val) { let that = this; that.timeStr = val.name; let day; if (+val.value === 1) { day = 7; that.oneDate = new Date(that.DaysAgo(day)); that.twoDate = new Date(); } else if (+val.value === 2) { day = 30; that.oneDate = new Date(that.DaysAgo(day)); that.twoDate = new Date(); } else if (+val.value === 3) { day = 60; that.oneDate = new Date(that.DaysAgo(day)); that.twoDate = new Date(); } else if (+val.value === 4) { day = 90; that.oneDate = new Date(that.DaysAgo(day)); that.twoDate = new Date(); } else if (+val.value === 8) { this.oneDate = new Date(new Date().getFullYear(), 0, 0); this.twoDate = new Date(); day = this.countWeekDaysBetween(this.oneDate, this.twoDate); } if (+val.value === 5) { day = that.getDuration(new Date().getFullYear(), +new Date().getMonth()); that.oneDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 1, 1); that.twoDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 1, day); } else if (+val.value === 6) { day = that.getDuration(new Date().getFullYear(), +new Date().getMonth() - 1); that.oneDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 2, 1); that.twoDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 2, day); } else if (+val.value === 7) { // 查当月的时间 that.twoDate = new Date(); that.oneDate = moment(moment().format('YYYY-MM') + '-01') } that.cDays = day; that.dataType = val; that.dateOneVisible = false; that.dateOneV = false; that.dateTwoVisible = false; that.dateTwoV = false; that.init(); }, // 改变的值存入变量 changeOne(picker) { this.newTime1 = new Date(picker.getValues()[0], +picker.getValues()[1] - 1, picker.getValues()[2]); }, changeTwo(picker) { this.newTime2 = new Date(picker.getValues()[0], +picker.getValues()[1] - 1, picker.getValues()[2]); }, onCanceld() { this.dateOneVisible = false; this.dateOneV = false; this.dateTwoVisible = false; }, // 中间方法调用插件方法,传递日期 onConfirmNewOne() { this.onConfirm1(this.newTime1); }, onConfirmNewTwo() { this.onConfirm2(this.newTime2); }, // 时间确定 onConfirm1(date) { this.dataType = ''; if (!date) { date = new Date(); } let oneYear = moment(date).format('YYYY'); let twoYear = moment(this.twoDate).format('YYYY'); if (this.GetDayDiff(this.oneDate, this.twoDate) < 0) { this.oneDate = sessionStorage.getItem('oneDate'); Notify({ type: 'warning', message: '起止时间不能晚于终止时间' }); return; } if (this.isCalendarYear) { if (oneYear === twoYear) { console.log('第一个日期', this.oneDate); console.log('第二个日期', this.twoDate); this.oneDate = date; this.init(); } else { this.oneDate = sessionStorage.getItem('oneDate'); Notify({ type: 'warning', message: '不能跨年查询' }); } } else { this.oneDate = date; this.init(); this.oneTwoheight = '30%'; this.timeStr = '时间段'; this.dateOneVisible = false; this.dateOneV = false; this.dateTwoVisible = false; this.datetwoV = false; } }, onConfirm2(date) { this.dataType = ''; if (!date) { date = new Date(); } let oneYear = moment(this.oneDate).format('YYYY'); let twoYear = moment(date).format('YYYY'); if (this.GetDayDiff(this.oneDate, this.twoDate) < 0) { this.twoDate = sessionStorage.getItem('twoDate'); Notify({ type: 'warning', message: '终止时间不能早于起止时间' }); return; } if (this.isCalendarYear) { if (oneYear === twoYear) { console.log('第一个日期', this.oneDate); console.log('第二个日期', this.twoDate); this.twoDate = date; this.init(); } else { this.twoDate = sessionStorage.getItem('twoDate'); Notify({ type: 'warning', message: '不能跨年查询' }); } } else { this.twoDate = date; let one = this.getMonthBegin(new Date().getFullYear(), 1); let two = this.getMonthEnd(new Date().getFullYear(), 2); console.log(moment(one).format('YYYYMMDD')); console.log(moment(two).format('YYYYMMDD')); if ( moment(this.oneDate).isBetween(moment(one).format('YYYYMMDD'), moment(two).format('YYYYMMDD')) && moment(this.twoDate).isBetween(moment(one).format('YYYYMMDD'), moment(two).format('YYYYMMDD')) ) { } else { let day = this.countWeekDaysBetween(this.oneDate, this.twoDate); this.cDays = day - 30; if (this.cDays < 0) { this.cDays = 0; } console.log(this.cDays); } this.init(); this.oneTwoheight = '30%'; this.timeStr = '时间段'; this.dateOneVisible = false; this.dateOneV = false; this.dateTwoVisible = false; this.datetwoV = false; } this.getSupLevel2DimInfo(); }, // 自然月第1天 getMonthBegin(year, month) { return new Date(year, month - 1, 1); }, // 计算两个日期之间的相差多少天 GetDayDiff(date1, date2) { return (date2 - date1) / (1000 * 3600 * 24); }, // 多少天之前 DaysAgo(val) { let d = new Date(); d.setDate(d.getDate() - val); return d.toISOString().split('T')[0]; }, // 返回当月多少天 getDuration(year, month) { let d = new Date(year, month, 0); return d.getDate(); }, // 自然月最后一天 getMonthEnd(year, month) { return new Date(year, month, 0); }, countWeekDaysBetween(date1, date2) { return (date2 - date1) / (1000 * 3600 * 24).toFixed(0); }, // 获取二级分类 getSupLevel2DimInfo() { // 取当前月份的最后一天和当前比较,如果不是当前最后一天,就取上月最后一天 function removeFalsy(arr) { return arr.filter(Boolean); } } }, mounted() { this.init(); } }; </script> <style lang="stylus" scoped> .time-title margin-top .2rem padding .15rem font-size .32rem text-indent .2rem .k-select overflow hidden padding .3rem .6rem span display inline-block padding .1rem .2rem background #f4f4f4 margin-right .25rem margin-top .25rem border-radius .1rem color #777 .time-line display flex text-align center font-size .32rem padding-top .15rem padding-bottom .15rem .y flex 1 .m flex 1 .sl padding .15rem .35rem border-radius 5px .d flex 1 .sl padding .15rem .35rem border-radius 5px .bot-btn overflow hidden padding .15rem text-align center .cz, .qd display inline-block padding .15rem 1.3rem color #fff .cz background #f4f4f4 color #333 border-radius .6rem 0 0 .6rem .qd background #0BB48C border-radius 0 .6rem .6rem 0 .date-option overflow hidden .btn-div overflow hidden margin-top .35rem padding .15rem text-align center .cz, .qd display inline-block padding .15rem 1.3rem color #fff .cz background #f4f4f4 color #333 border-radius .6rem 0 0 .6rem .qd background #0BB48C border-radius 0 .6rem .6rem 0 .date-div display inline-block background #fff margin-left .3rem margin-top .2rem .date-bg0 display inline-block text-align center margin-left .1rem padding .15rem .25rem border-radius .1rem background #F4F4F4 color #666 .date-bg1 display inline-block margin-left .1rem color #666 .date-bg2 display inline-block text-align center margin-left .1rem padding .15rem .25rem border-radius .1rem background #F4F4F4 color #666 .refresh:before { margin-left .15rem content: '\27F2'; font-size .36rem } </style>
标签:picker,false,vant,oneDate,改造,日期,Date,new,twoDate From: https://www.cnblogs.com/ronle/p/16744245.html