el-date-picker 限制当前日期之前,精确到时分秒

需求:el-data-picker选择日期,不能选择当日之前的日期包括时分秒,之后的时间可以任意选择时间。

html部分代码:

script部分代码:

首先是data部分,配置data-picker。

第二部分,监听表单当中的data-picker的值的变化,判断是否是当天的日期,如果是当天需要获取当前的时分秒,拼接成新的时分秒区域的可选范围。如果不是直接给出所有的范围。

第三部分,完成前面两部分,发现,data-picker的时分秒区域更新异常,数据设置成功但是不渲染,所以在它的input事件上,重新给v-model赋值。让时分秒区域重新渲染。

新增,禁止在内部输入框,手动输入日期方法。

data(){
    return{
        pickerOptions: {
            // 设置禁用状态,参数为当前日期
            disabledDate(time) {
            // return time.getTime() < Date.now(); //当天不可选
            return time.getTime() < Date.now() - 86400000 //  - 86400000是否包括当天
        },
            // 控制时分秒不可选
            selectableRange: '00:00:00 - 23:59:59'
        },
    }
},
watch: {
    'addNoticeform.releaseTime'(selectTime) {
      // 当选择的日期就是当天的时候,这个时候就要限制时间应当小于此时此刻的时分秒
      if (this.$moment(selectTime).format('l') === this.$moment(new Date()).format('l')) {
        const data = new Date()
        const hour = data.getHours()
        const minute = data.getMinutes()
        const second = data.getSeconds()
        this.$set(this.pickerOptions, 'selectableRange', `${hour}:${minute}:${second} - 23:59:59`)
      } else {
        // 当选择的日期小于当天的时候,这时需要把时分秒的限制放开,否则不能选择
        this.$set(this.pickerOptions, 'selectableRange', '00:00:00 - 23:59:59')
      }
    }
},
methods:{
    changeTime(data) {
    const nowTime = new Date()
      if (this.$moment(data).format('l') === this.$moment(new Date()).format('l') && data < nowTime) {
        this.$nextTick(() => {
        // 生效成功更新数据并更新页面

        //调用父组件方法
          this.$emit('changeDatePicker', this.$moment(data).format('yyyy-MM-DD') + ` ${this.$moment(new Date()).format('LTS')}`)
        })
      }
    },

    //具体父组件方法
    changeDatePicker(data) {
      this.$set(this.addNoticeform, 'releaseTime', data)
    },



    // 组件禁止组件里面的input输入值
    timeEditable() {
      this.$nextTick(() => {
        const els = document.querySelectorAll('.el-date-picker__editor-wrap input')
        for (var i = 0; i <= els.length - 1; i++) {
          els[i].setAttribute('readonly', 'readonly')
        }
      })
    },

}

你可能感兴趣的:(vue.js,elementui,javascript)