本文介绍了在Vue项目中使用Element-UI时间选择器进行开始和结束时间的校验，以及如何实现结束时间必须大于等于开始时间的逻辑。在遇到时分秒校验问题时，采取了在结束时间选择后的change事件中添加额外校验的方法，以确保数据正确性。同时，详细展示了相关代码实现和问题分析。
摘要由CSDN通过智能技术生成
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
页面中使用：
开始时间：
<el-date-picker v-model="startDateTime" type="datetime" placeholder="开始时间">
</el-date-picker>
结束时间：
<el-date-picker v-model="endDateTime" type="datetime" placeholder="结束时间">
</el-date-picker>
二、校验：
1.校验规则：开始和结束时间都是有时分秒的，结束时间要大于等于开始时间。
2.遇见问题：时分秒如何校验。
选择开始时间之后，结束时间控件中，大于开始开始时间的日期设置为不可选状态。
注意两点：
1、:picker-options="pickerOptions" 这个属性用来设置日期禁用范围
2、日期比较时：endDateTime.slice(0, 10) 要截取日期进行比较，否则带上时间，当时间选择00:00:00和其他时间时，会出现开始时间和结束时间不能选择同一天的问题。
<template>
<div class="testClass" style="text-align: left">
<el-form :model="postData" :rules="rules" ref="dataForm">
<el-form-item label="开始时间：" prop="start" style="display: inline-block">
<el-date-picker
v-model="postData.startDateTime"
type="datetime"
popper-class="no-atTheMoment"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsStartDateTime"
placeholder="开始时间"
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间：" prop="end" style="display: inline-block">
<el-date-picker
v-model="postData.endDateTime"
type="datetime"
placeholder="结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsEndDateTime"
</el-date-picker>
</el-form-item>
只能选择当前时刻以后的时间：
<el-date-picker
v-model="postData.expireDate"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
placeholder="选择日期"
<el-button @click="sumitData"> 校验</el-button>
</el-form>
</template>
<script>
export default {
name: "datepicker",
data() {
var validateStartDatetime = (rule, value, callback) => {
if (this.postData.endDateTime && this.postData.startDateTime) {
new Date(this.postData.startDateTime).getTime() >
new Date(this.postData.endDateTime).getTime()
callback(new Error("开始时间需要小于结束时间！"));
} else {
callback();
} else {
callback();
var validateEndDatetime = (rule, value, callback) => {
if (this.postData.startDateTime && this.postData.endDateTime) {
new Date(this.postData.startDateTime).getTime() >
new Date(this.postData.endDateTime).getTime()
callback(new Error("结束时间需要大于开始时间！"));
} else {
callback();
} else {
callback();
return {
postData: {
startDateTime: "",
endDateTime: "",
expireDate: "",
pickerOptionsStartDateTime: {
disabledDate: (time) => { //设置禁用范围
if (this.postData.endDateTime) {
return (
time.getTime() >
new Date(
this.postData.endDateTime.slice(0, 10)
).getTime() || time.getTime() > Date.now()
//endDateTime.slice(0, 10) 截取日期进行比较，否则带上时间，当时间选择00:00:00和其他时间时，会出现开始时间和结束时间不能显示同一天的问题。
} else {
return time.getTime() > Date.now();
pickerOptionsEndDateTime: {
disabledDate: (time) => {
if (this.postData.startDateTime) {
return (
time.getTime() <
new Date(
this.postData.startDateTime.slice(0, 10)
).getTime() -
8.64e7 || time.getTime() > Date.now()
} else {
return time.getTime() > Date.now();
pickerOptions: {
selectableRange: (() => {
let data = new Date();
let hour = data.getHours();
let minute = data.getMinutes();
let second = data.getSeconds();
return [`${hour}:${minute}:${second} - 23:59:59`];
})(),
disabledDate(time) {
var date = new Date();
date.setFullYear(date.getFullYear() + 2);
date.setDate(date.getDate() - 1);
return (
time.getTime() < Date.now() - 8.64e7 ||
time.getTime() > date.getTime()
rules: {
start: [{ validator: validateStartDatetime, trigger: "change" }],
end: [{ validator: validateEndDatetime, trigger: "change" }],
methods: {
sumitData() {
const _this = this;
_this.$refs["dataForm"].validate((valid) => {
if (valid) {
alert("成功");
} else {
alert("失败");
</script>
以上代码写完，但是发现时间也就是时分秒无法校验，也就是如果选择同一天日期，结束时间在时间上是可以选择小于开始时间的。经过下面的分析，忙着赶进度，我的解决办法就是给开始和结束时间又加了校验validate，因为时分秒的禁用状态不好加，但是又不能给后台传错误数据，所以在选完结束时间的change事件上加上校验，如果同一个日期，结束时间的时分秒选择了小于开始时间的时分秒，校验会提示错误，从而拦截。（没有真正解决问题，但是保证数据不错）如图：
这样做的理由：如果只是日期的校验，实现很简单，但是，加上时分秒之后，就希望对时分秒可也设置不可选状态。但是实现就出问题了，虽然时分秒也可以设置禁用状态，（通过timePiceker中的selectableRange属性），但是设置这个禁用状态的逻辑是依赖前面选择的开始时间日期的，举个例子：开始时间选择2021-10-03 02:02:02，结束时间的日期选择2021-10-03时，才需要将时间的控件02:02:02之前的时间设为禁用，当结束时间日期大于2021-10-03时，是不用对时间进行禁用设置的
这就需要监听结束时间控件的日期选择时间，但是datetimePicker没有向外暴露这个事件。所以，官方文档没有这个解决的办法。我的思路是1.改源码，向外抛出点击日期的事件，或者日期那个input的change事件。但是改源码很麻烦，尤其是npm安装引用这种。2.就是操作dom监听点击日期的事件，或者日期那个input的change事件。也挺麻烦，毕竟原生js操作dom没有jquery那么方便。3.换时间插件。
综上：才加了个校验规则。
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细，这里做一个element-ui日期插件的补充。
官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。
单个输入框的
组件代码：
&amp;amp;lt;el-date-picker
v-model=&amp;quot;value1&amp;quot;
type=&am
需求是这样子的：
有效期只能一个月一个月选，不可以 1 月 13 日 到 2 月 13 日，最小选择是一个月。
简单来说：开始时间选择范围是每个月的 1 号，结束时间选择范围只能是每个月最后一天
我的逻辑是这样子哒：
第一种情况： date 没有值的时候
第一次打开时间选择器，此时 date并没有值，这时可选择的范围只能是每个月的 1 号
我们点击了某个月的 1 号，此时时间范围需要变动了，时间范围是每个月的最后一天。
注意： 你当前选择的那天必须是可选的，不然会陷入你选择了 1 号后，只能选择 31 号
element-ui el-date-picker日期禁止选择今天以前的日期
<el-form-item label="结束时间:" prop="">
<el-date-picker
type="date"
placeholder="选择日期"
style="width: 250px"
v-model="form.endTime"
:picker-options="picke
Element-
UI组件之表单FormRadio 单选框基础用法禁用状态单选框组按钮样式带有边框Checkbox 多选框基础用法禁用状态多选框组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可清空密码框带 icon 的输入框文本域可自适应文本高度的文本域复合型输入框尺寸带输入建议自定义模板远程搜索输入长度限制
Radio 单选框
type="datetime"
format="
yyyy-
MM-
dd HH:
mm"
value-format="
yyyy-
MM-
dd HH:
mm:
ss"
:picker-options="startTime"
1. 首先到My97DatePicker官网下载zip文件，解压，可以看到有个 WdatePicker.js 文件（基本只需要下载这个就可以）
2. 引入js文件
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
3. 代码
开始时间：<input type="t...
1.设置el-date-picker的属性:picker-options
<el-date-picker :picker-options="startDatePicker"></el-date-picker>
<el-date-picker :picker-options="endDatePicker"></el-date-picker>
