【element-ui】日期时间选择器如何控制某时段时间不能选择

实现的效果:
在这里插入图片描述

1、使用参数picker-options
建议使用参数time-arrow-control,用箭头进行选择(用鼠标滚轮操作稳定性很差)
disabledDate :控制只能选择今天及以后的日期
selectableRange :控制选择的时间段。如果是今天,则时间从此刻开始,否则从0时开始

                             <el-date-picker
                                :disabled="isDisabled"
                                :editable="false"
                                :clearable = "true"
                                v-model="ruleFormOne.starttime"
                                time-arrow-control
                                :picker-options="{
                                   disabledDate: time => {
                                      return time.getTime() < Date.now() - 3600 * 1000 * 24
                                    },
                                    selectableRange: startTimeRange
                                  }"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择开始日期"
                                />
                              </el-form-item>
    watch: {
        starttime:{
          handler(newValue, oldValue) {
            if(newValue){

                let nowDate = moment().format('YYYY-MM-DD HH:mm:ss');
                let dt = nowDate.split(" ");
                let st = '';

                if(newValue.split(" ")[0] == dt[0]){
                // 是今天,选择 的时间开始为此刻的时分秒
                  st = dt[1];
                }else{
                // 明天及以后从0时开始
                  st = '00:00:00';
                }
                
                this.startTimeRange =  st + ' - 23:59:59'; 
                //例如:如果今天此刻时间为10:41:40 则选择时间范围为: 10:41:40 - 23:59:59  
                //否则为:00:00:00- 23:59:59
             } 
          }
        } 
    },
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值