记一次Element的DateTimePicker的使用

1,947 阅读1分钟

项目里遇到个需求,使用DateTimePicker选择时间不止要限制当前日期之前不能选,还得限制当前时分秒之前不能选(不包括秒),首先使用DateTimePickerpicker-options来限制当前日期。

当然,日期是很好限制的

disabledDate: time => {                
    return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;              
}

使用disabledDate就可以进行限制。

       时分秒方面主要是今日和别的日期的区别,只有今日才会限制,如何才能知道选中的今日,看文档Element并没有提供点击日期的事件,所宜采用监听数据的方式,DateTimePicker绑定的数据在切换日期的时候就会变,所以使用动态改变selectableRange属性。

所以,最终写法如下:

<el-date-picker v-model="form.startTime" 
    value-format="yyyy-MM-dd HH:mm:ss" 
    format="yyyy-MM-dd HH:mm:ss" 
    type="datetime"  
    placeholder="选择日期时间" 
    ref="datapicker" 
    :picker-options="{              
        disabledDate: time => {                
            return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;              
        },              
        selectableRange: startTimeRange            
    }"
></el-date-picker>

watch: {    
    "form.startTime": {      
        handler(newValue, oldValue) {        
            if (newValue) {          
                let nowDate = parseTime(Date.now());          
                let dt = nowDate.split(" ");          
                let st = "";          
                if (newValue.split(" ")[0] == dt[0]) {            
                    st = dt[1];          
                } else {            
                    st = "00:00:00";          
                }          
                this.startTimeRange = st + " - 23:59:59";        
            }      
        },    
    },  
},

判断是今天就限制当前时间到23:59:59否则就限制00:00:00 到 23:59:59