当前位置：首页 > news >正文

el-date-picker 日期时间选择器限时时间范围精确到时分秒

news 2025/8/8 16:25:10

官方的disabledDate属性：设置禁用状态，参数为当前日期，要求返回 Boolean，它只能禁用日期，对于时间并不能直接禁用，总结以下两个方法解决禁用时间：

1.通过watch去监听源数据：

1.1 组件

          <el-form-item label="任务时间" prop="time"><el-date-picker:disabledDate="disabledDate"style="width: 100%"v-model="form.time"type="datetimerange"value-format="yyyy-MM-dd HH:mm:ss"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item>

2.2 watch函数来监听数据变化

methods:{//只能禁用日期disabledDate (time) {// 禁止选择当前时间之前的日期return time.getTime() < Date.now() - 24 * 3600 * 1000;},
},
watch：{//禁用时间'form.time'(newVal) {// 如果开始时间是在当前时间之前，就重置时间if (newVal && newVal[0] && new Date(newVal[0]).getTime() < Date.now()) {this.$nextTick(() => {this.$message({type: 'error',message: '开始时间不能早于当前时间！'});this.form.time = ['', ''];});}// 如果结束时间是在当前时间之前，也重置时间if (newVal && newVal[1] && new Date(newVal[1]).getTime() < Date.now()) {this.$nextTick(() => {this.$message({type: 'error',message: '结束时间不能早于当前时间！'});this.form.time = ['', ''];});}},
}

2.通过el-form表单校验去给校验错误提示（体验会好些）

computed:{rules () {return {time: [{ required: true, message: '请输入任务时间', trigger: 'blur' },{validator: this.checkTimeRange,trigger: 'change'}],}}
},
methods:{checkTimeRange (rule, value, callback) {if (!value || !value[0] || !value[1]) {callback(new Error('请选择时间范围'));} else if (new Date(value[0]).getTime() < Date.now()) {callback(new Error('开始时间不能早于当前时间'));} else if (new Date(value[1]).getTime() < Date.now()) {callback(new Error('结束时间不能早于当前时间'));} else {callback();}},
}