DatePicker 日期选择框
最近一直做ant-design-vue项目，总结下DatePicker 日期选择框 一、 第一种单天时间选择1、限制只能选明天及之后的日期（今天不可选中）2、限制只能选今天及之后的日期（今天可选中）3、限制只能选昨天及之前的日期（今天不可选中）4、限制只能选今天及之前的日期（今天可选中）5、案例： 二、 多天时间段选择 （ 周 和 月）最近一直做ant-design-vue项目，总结下DatePicker 日期选择框
主要应用禁用部分时间，比如今天以后的，或者今天以前的。
显示年月日和时分秒
一、 第一种单天时间选择
1、限制只能选明天及之后的日期（今天不可选中）
disabledDate (current) {return current && current < moment().endOf('day')}
2、限制只能选今天及之后的日期（今天可选中）
disabledDate (current) {return current && current < moment().subtract(1, 'days').endOf('day')}
3、限制只能选昨天及之前的日期（今天不可选中）
disabledDate (current) {return current && current > moment().subtract(1, 'days').endOf('day')}
4、限制只能选今天及之前的日期（今天可选中）
disabledDate (current) {return current && current > moment().endOf('day')}
5、案例：
<a-date-pickerstyle="width:242px;"v-model:value="values"@change="dateChange" :disabled-date="disabledDate":show-time="defaultValue"/>values:'', //时间disabledDate:'', //禁用今天以前时间defaultValue:'', //展示时间import moment from 'moment'; //引入momentcreated(){//禁用日期 this.disabledDate = (current) => {// console.log(current);// console.log(moment().endOf('day'));// Can select days before today and todayreturn current && current < moment().endOf('day');};},//change事件后，选择把数值转换成相应的格式dateChange(val){console.log(val)this.values=moment(val).format('YYYY-MM-DD HH:mm')console.log(this.values)},
二、 多天时间段选择 （ 周 和 月）
//只能选择今天之前的 时间段（几号到几号）<a-range-picker :disabled-date="disabledDate" v-if="where.useStatus==1" @change="onChange1" v-model:value="value3" /><a-week-picker :disabled-date="disabledDate" style="width:100%;" v-if="where.useStatus==2" @change="onChange2" v-model:value="value4" placeholder="请选择周"/> <a-month-picker style="width:100%;" v-if="where.useStatus==3" @change="onChanges" v-model:value="value2" placeholder="请选择月份"/>disabledDate:'', //禁用今天以后时间value3:[], //按日import moment from 'moment'async created() {//初始昨天 (需要加参数)const day = new Date();const day2=day.getTime() - 24 * 60 * 60 * 1000;const day1=new Date(day2);const s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();this.times=s1;this.where.beginTime=s1;this.where.endTime=s1;//禁用日期this.disabledDate = (current) => {// console.log(current);// console.log(moment().endOf('day'));// Can select days before today and todayreturn current && current > moment().startOf('day');};}，方法//日粒度onChange1(date,dateString) {console.log(date,dateString);// console.log(dateString);if(dateString){this.where.beginTime=dateString[0]; //当日开始时间this.where.endTime=dateString[1]; //当日结束时间}if(dateString[0]==''){this.where.beginTime=this.times;this.where.endTime=this.times;this.value3[0]=this.times;this.value3[1]=this.times;}// console.log(this.times);// console.log(this.where);},//周粒度onChange2(weekData) {// const startDate = moment(weekData).day(1).format('YYYY/MM/DD (dddd)'); // 周一日期if(weekData){const startDate = moment(weekData).day(1).format('YYYY/MM/DD'); // 周一日期const endDate = moment(weekData).day(7).format('YYYY/MM/DD'); // 周日日期let start=startDate.split('/')[0]+'-'+startDate.split('/')[1]+'-'+startDate.split('/')[2];let end=endDate.split('/')[0]+'-'+endDate.split('/')[1]+'-'+endDate.split('/')[2];this.where.beginTime=start; //当周开始时间this.where.endTime=end; //当周结束时间// this.value4=start+'-'+end;}if(weekData[0]==''){this.where.beginTime=this.times;this.where.endTime=this.times;}},//月粒度onChanges( data,monthData) {// console.log(data,monthData);console.log(data);// console.log(monthData);let y=monthData.split('-')[0]; //年let m=monthData.split('-')[1]; //月let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天if(monthData){this.where.beginTime=monthData+'-'+'01'; //当月开始时间this.where.endTime=monthData+'-'+lastDateOfMonth; //当月结束时间}if(monthData[0]==''){this.where.beginTime=this.times;this.where.endTime=this.times}},
