<div class="block"><el-date-pickerv-model="selectStartTime"type="date"placeholder="开始日期":picker-options="pickerOptions0"class="block1":editable="false"@change="getStartEchart"></el-date-picker><span style="margin:0px 5px;color:#fff;font-size: 12px;">至</span><el-date-pickerv-model="selectEndTime"type="date"placeholder="结束日期":picker-options="pickerOptions1"class="block1":editable="false"@change="getEndEchart"></el-date-picker></div>
这个是符合我项目的日期选择器
①点击开始日期，如七月二号，结束日期则也是七月二号。
②结束日期可以选择，但只能选择七月二号到七月七号
③开始日期为空时，结束日期不能选择
js部分
data(){return{pickerOptions0: {disabledDate: (time) => {if(this.selectStartTime != "" && this.selectStartTime != null){return (time.getTime() > Date.now())&&(this.selectEndTime = this.selectStartTime);}else if (this.selectEndTime != "" && this.selectEndTime != null) {return time.getTime() > Date.now() || time.getTime() > this.selectEndTime;} else{return time.getTime() > Date.now();}}},pickerOptions1: {disabledDate: (time) => {if (this.selectStartTime != "" ) {var startDate = +this.selectStartTime + (1000*60*60*24)*6;//只允许显示六天var startDate = new Date(startDate);//标准时间return time.getTime() < this.selectStartTime || time.getTime() >= startDate || time.getTime() >= Date.now() ;} else {return time.getTime() < this.selectStartTime || time.getTime() >= Date.now();}}},selectStartTime:'',selectEndTime:'',}}
日期初始化
mounted: function(){this.getdatatime()}methods:{getdatatime(){this.selectStartTime= new Date(new Date(new Date().getTime()- 1*24*60*60*1000).Format("YYYY/MM/DD")+" 00:00:00");//昨天this.selectEndTime= new Date(new Date(new Date().getTime()).Format("YYYY/MM/DD")+" 23:59:59");//今天},
如今天日期7.22
getStartEchart（）getEndEchart（） 点击出现的事件
修改饿了么ui的样式
.block1 .el-input__inner{width: 150px;height: 25px;color: white;background-color:#0C2152;}.el-date-editor.el-input, .el-date-editor.el-input__inner{width: 150px;}
el-input__inner这个你按F12可以查找的
