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可以查找的
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值