element 时间日期选择器 禁用当前时间之前的 时间与日期

element 时间日期选择器 禁用当前时间之前的 时间与日期

有些需求场景 ，我们不仅要禁用今天之前的日期，同时还要禁用现在之前的时间，比如现在是2022.06.18 下午两点。 那么我要禁用2022.06.18之前的日期，以及今天14点之前的时间（此时应该只能选 当前时间 - 23:59:59），但是当你选择2022.06.17以及之后的日期的时候 此时时间就可以随便选了 从 00:00:00 - 23:59:59 都可以

<el-date-picker
    v-model="dataForm.time"
    type="datetime"
    placeholder="选择日期时间"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="pickerOptions"
    :default-time="'23:59:59'"
/>

// 这个需要npm install moment
import moment from 'moment';

export default {
	data() {
	    let disabledDate = date => {
	        return date.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
	    };
	    return {
	        pickerOptions: {
	            disabledDate,
	            // selectableRange 用来限制时分秒的选择，这里要求只能选择当前时间之后到0点的时间点 但应该只限今天
	            selectableRange: '00:00:00 - 23:59:59',
	        },
	        dataForm: {
	            time: ''
	        }
	    };
	},
	watch: {
	    'dataForm.time'() {
	        this.selectable();
	    }
	},
	methods: {
		// 可选的时间范围
	    selectable() {
	        const date = moment(this.dataForm.time).startOf('day').format('x');
	        const nowDate = moment().startOf('day').format('x');
	        // 如果选择的是今天 则需要禁用已经过去的时间节点
	        if (date <= nowDate) {
	            // 默认选择的最新时间 是当前时间的两分钟后 （留出2分钟的富裕时间）
	            this.pickerOptions.selectableRange = (
	                `${moment().add(2, 'minutes').format('HH:mm:ss')} - 23:59:59`
	            );
	        }
	        // 如果是以后的日期，则不需要禁用时间节点
	        else {
	            this.pickerOptions.selectableRange = '00:00:00 - 23:59:59';
	        }
	    }
	}
}

在此感谢 杭州随大佬的鼎力帮助@那年的白月光

最后

以上就是丰富铃铛最近收集整理的关于element 时间日期选择器 禁用当前时间之前的 时间与日期的全部内容，更多相关element内容请搜索靠谱客的其他文章。