DatePicker 日期、日期+时间选择器:

1 . 日期区间选择器 ：基于type="date"类型；

格式：YYYY-MMM-DD ，2020-11-04；
预设功能：开始时间 < 结束时间；

---

---

Html ：模板

 <div class="dateBox">
      <el-date-picker
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        v-model="query.sDate"
        :disabledDate="disabledDateS"
        type="date"
        placeholder="开始日期"
      >
      </el-date-picker>
      <div style="padding: 0 10px">至</div>
      <el-date-picker
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        :disabledDate="disabledDateE"
        v-model="query.eDate"
        type="date"
        placeholder="结束日期"
      >
      </el-date-picker>
    </div>

---

JS: 功能
Vue3.0 : setup()函数

// 已引入此处为前提 import { reactive, toRefs } from "@vue/reactivity";
  setup() {
    const dateState = reactive({
      query: {
        sDate: "",
        eDate: "",
      },
      disabledDateS(value) {
        if (dateState.query.eDate) {
          if (
            new Date(value).getTime() >=
            new Date(dateState.query.eDate).getTime()
          ) {
            return true;
          }
        } else {
          return false;
        }
      },
      disabledDateE(value) {
        if (dateState.query.sDate) {
          if (
            new Date(value).getTime() <=
            new Date(dateState.query.sDate).getTime() - 86400000
          ) {
            return true;
          }
        } else {
          return false;
        }
      },
    });

    return {
      ...toRefs(dateState),
    };
  },

---

css: 样式

.dateBox {
  display: flex;
  align-items: center;
}

2. 日期+时间区间选择器 : 基于type="datetime"类型

格式：YYYY-MM-DD HH:mm:ss ，2021-12-14 02:00:02；
预设功能：
1.开始日期 < 结束日期；
2.如果：同一日期的开始时间点选择>结束时间时间点 ：则纠正操作选择将开始与结束变量取同一个值；

Html ：模板

 <div class="Date">
     <el-date-picker
         format="YYYY-MM-DD HH:mm:ss"
         value-format="YYYY-MM-DD HH:mm:ss"
         v-model="query.sDate"
         @change="checkTimeS"
         :disabledDate="disabledDateS"
         type="datetime"
         popper-class="DateAll"
         placeholder="开始日期"
     ></el-date-picker>
     <span>-</span>
     <el-date-picker
         format="YYYY-MM-DD HH:mm:ss"
         value-format="YYYY-MM-DD HH:mm:ss"
         :disabledDate="disabledDateE"
         v-model="query.eDate"
         @change="checkTimeE"
         type="datetime"
         popper-class="DateAll"
         placeholder="结束日期"
     ></el-date-picker>
 </div>

JS: 功能
Vue3.0 : setup()函数

setup(){
	const tableState = reactive({
	 	query: {
               sDate: "",
               eDate: ""
           },
		disabledDateS(value) {
	       if (tableState.query.eDate) {
	            if (
	                new Date(value).getTime() >=
	                new Date(tableState.query.eDate).getTime()
	            ) {
	                return true;
	            }
	        } else {
	            return false;
	        }
	    },
	    disabledDateE(value) {
	        if (tableState.query.sDate) {
	            if (
	                new Date(value).getTime() <=
	                new Date(tableState.query.sDate).getTime() - 86400000
	            ) {
	                return true;
	            }
	        } else {
	            return false;
	        }
	    },
	     checkTimeS(value) {
                if (tableState.query.eDate && value) {
                    if (
                        new Date(value).getTime() >=
                        new Date(tableState.query.eDate).getTime()
                    ) {
                        tableState.query.sDate = tableState.query.eDate;
                    }
                }
            },
            checkTimeE(value) {
                 if (tableState.query.sDate && value) {
                    if (
                        new Date(value).getTime() <
                        new Date(tableState.query.sDate).getTime()
                    ) {
                        tableState.query.eDate = tableState.query.sDate;
                    }
                }
            },
	  })
	return {
	...toRefs(tableState)
	}
}

3 . format: 格式表格参考;

format: 格式参考

Format	Output
YY	18
YYYY	2018
M	1-12
MM	01-12
MMM	Jan-Dec
MMMM	January-December
D	1-31
DD	01-31
d	0-6
dd	Su-Sa
ddd	Sun-Sat
dddd	Sunday-Saturday
H	0-23
HH	00-23
h	1-12
hh	01-12
m	0-59
mm	00-59
s	0-59
ss	00-59
SSS	000-999
Z	+05:00
ZZ	+0500
A	AM PM
a	am pm