一、安装引入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.换时间插件。

 

综上：才加了个校验规则。