DateTimePicker根据当前时间限制选择范围

本文主要是介绍DateTimePicker根据当前时间限制选择范围，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

时间范围控件和单个的时间控件都可以用

页面代码：

标签上只需要加 :picker-options="pickerOptions"即可

<template><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="150px"class="demo-ruleForm"><el-form-item label="大于当前时间" prop="mytime"><el-date-pickertype="datetime"placeholder="选择日期"value-format="timestamp":picker-options="pickerOptions"v-model="ruleForm.mytime"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form>
</template>

JS代码：

<script>export default {data() {var validateTime = (rule, value, callback) => {if (value <= Date.now()) {callback(new Error('选择时间必须大于当前时间'));} else {callback();}};return {pickerOptions: {// 限制收货时间不让选择今天以前的disabledDate(time) {return time.getTime() < Date.now() - 8.64e7;},},ruleForm: {mytime: '',},rules: {mytime: [{ required: true, message: '请选择时间', trigger: 'change' },{ validator: validateTime, trigger: 'blur' },],},};},methods: {submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},};
</script>

js代码只需要加上一下代码即可

pickerOptions: {
// 限制收货时间不让选择今天以前的
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
},
}