需求:可选择的时间大于当前时间,不符合条件的全部禁用
以下实现方式可精确到年、月、日、时、分、秒
HTML
<el-form-item label="盘点开始时间" prop="checkStartTime"><el-date-pickertype="datetime"placeholder="请选择开始时间"style="width: 100%"clearableformat="yyyy-MM-dd HH:mm:ss":picker-options="pickerOptions"v-model="inventoryEdit.checkStartTime"></el-date-picker></el-form-item>
data里
// 选择开始时间大于等于当前时间pickerOptions: {disabledDate(time) {const dateTime = new Date();const startDateTime = dateTime.setDate(dateTime.getDate() - 1);const endDateTime = dateTime.setDate(dateTime.getDate() + 30000); //30000为当前日期之后多少天return (time.getTime() < new Date(startDateTime).getTime() ||time.getTime() > new Date(endDateTime).getTime());},selectableRange://setMinutes,getMinutes限制分 , 年、月、日、时、分、秒同理,+1为数字区间//重点就在这个set get, 渔给了, 鱼自己捕吧this.parseTime(new Date().setMinutes(new Date().getMinutes() + 1),"{hh}:{ii}:{ss}") + "- 23:59:00",},//this.parseTime为封装的方法在下面贴出来了
this.parseTime
// 日期格式化export function parseTime(time, pattern) {if (arguments.length === 0 || !time) {return null}const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'let dateif (typeof time === 'object') {date = time} else {if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {time = parseInt(time)} else if (typeof time === 'string') {time = time.replace(new RegExp(/-/gm), '/');}if ((typeof time === 'number') && (time.toString().length === 10)) {time = time * 1000}date = new Date(time)}const formatObj = {y: date.getFullYear(),m: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),i: date.getMinutes(),s: date.getSeconds(),a: date.getDay()}const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {let value = formatObj[key]// Note: getDay() returns 0 on Sundayif (key === 'a') {return ['日', '一', '二', '三', '四', '五', '六'][value] }if (result.length > 0 && value < 10) {value = '0' + value}return value || 0})return time_str}
ElementUI日期时间选择器限制时间范围 禁止此刻之前的所有时间选择(精确到 时 分 秒) pickerOptions 日期选择器范围选择
