element-ui 時間組件datePicker開始時間小於結束時間的校驗，時分秒校驗問題。

參考鏈接：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.換時間插件。