标签：datePicker postData getTime 校验 时间 Date 时分秒
参考链接：https://blog.csdn.net/m0_38105640/article/details/120669974
一、安装引入element-ui
npm i element-ui -S
完整引入
在 main.js 中写入以下内容：
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)
});
页面中使用：
<div>
开始时间：
<el-date-picker v-model="startDateTime" type="datetime" placeholder="开始时间">
</el-date-picker>
</div>
<div>
结束时间：
<el-date-picker v-model="endDateTime" type="datetime" placeholder="结束时间">
</el-date-picker>
</div>
二、校验：
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>
<div>
只能选择当前时刻以后的时间：
<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="选择日期"
/>
</div>
<el-button @click="sumitData"> 校验</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "datepicker",
data() {
var validateStartDatetime = (rule, value, callback) => {
if (this.postData.endDateTime && this.postData.startDateTime) {
if (
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) {
if (
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.换时间插件。
标签：datePicker,postData,getTime,校验,时间,Date,时分秒 来源： https://www.cnblogs.com/hxy--Tina/p/15945795.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。