vue 饿了么ui 日期选择器 修改样式

 

 

<div class="block">
                <el-date-picker
                  v-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-picker
                  v-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可以查找的