Vue+ElementUI 搭建後臺管理系統（實戰系列三）

前言

使用ElementUI已經有一段時間了，在一邊上手開發後臺管理系統的同事，也記錄了一些筆記，一直都沒有時間將這些零零散散的筆記總結起來，整理成一個比較系統詳細一點的教程，可以留着以後來看。

---

Vue+ElementUI 搭建後臺管理系統（實戰系列三）- 時間和日曆組件的處理

在文檔裏面，關於日期的組件，涉及到了單獨的年月日日期選擇器組件DatePicker,還有單獨的時分秒時間選擇器TimePicker,還有年月日時分秒集合在一起的日期時間選擇器DateTimePicker.

不管是啥樣的，只需要打開以下文檔，裏面都會安排的清清楚楚明明白白，完全不用擔心不會使用的問題哦。

TimePicker 時間選擇器
https://element.eleme.io/#/zh-CN/component/time-picker
DatePicker 日期選擇器
https://element.eleme.io/#/zh-CN/component/date-picker
DateTimePicker 日期時間選擇器
https://element.eleme.io/#/zh-CN/component/datetime-picker

在開發的過程中，會遇到這樣的幾個問題，記錄下來。

1:在這三個組件裏面，獲取到當前系統的時間，獲取當前的時間，渲染在界面，這裏用日期時間選擇器來具體操作一下。即DateTimePicker 日期時間選擇器，默認獲取當前日期

DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他選項可以參照 DatePicker 和 TimePicker。

獲取到默認的時間之後，在提交獲取的時間的格式的時候，也會遇到這樣的問題，以什麼樣的格式提交的問題，一般默認的是爲 Date 對象。如果不作處理的話，就是這樣的一個格式"2021-08-12T08:26:53.000Z"

在實際開發中，需要傳的參數的時間格式都是根據需要所定的，一般來說有三種

默認爲 Date 對象
值："2021-05-12T16:00:00.000Z"

使用 value-format
值：2021-05-13

時間戳
值：1620835200000

日期格式

使用format指定輸入框的格式；使用value-format指定綁定值的格式。

上面的例子裏面是使用默認 Date 對象傳值，我們這裏實際需求中式第二種格式的，所以需要在el-date-picker裏面設置一下時間的格式的參數，這裏添加了一下value-format="yyyy-MM-dd hh:mm:ss"。

將自己手動選擇的或者默認選擇的時間全部設置成這樣的需要的格式，當然了，這裏是要根據自己的項目需要來設置的喲。

<el-date-picker v-model="value" type="datetime" value-format="yyyy-MM-dd hh:mm:ss" placeholder="選擇日期時間">
</el-date-picker>

最後，點擊確定提交按鈕的時候，能夠將選中的時間格式，提交一下~·

參考代碼：test.vue

<template>
  <div class="block">
    <span class="demonstration">默認</span>
    <el-date-picker v-model="value" type="datetime" placeholder="選擇日期時間">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一週前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value: "",
    };
  },

  created() {
    this.Date();
  },
  methods: {
    //獲取當前年月日
    Date() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds(),
      };

      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date > 10 ? date.date : "0" + date.date;
      const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
      const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
      this.value =
        date.year +
        "-" +
        newmonth +
        "-" +
        newday +
        " " +
        date.hours +
        ":" +
        newminutes +
        ":" +
        newseconds;
      
    },
  },
};
</script>
<style scoped>
.tab-container {
  margin: 30px;
}
</style>

以上，對時間的處理，是自己手寫的代碼，當然還有一種更方便更快捷的方式，就是引入一下時間庫，一般會用到Vue的moment.js時間類庫。這個庫用起來也很方便，小巧耐用，完全不用擔心會對各種複雜的時間的格式處理會出現bug的問題，強烈案例一波~~

Moment.js 是一個 JavaScript 日期處理類庫（處理時間格式化的npm包）,用於解析、檢驗、操作、以及顯示日期，在新公司的項目中,大量使用Moment來處理時間日期,非常方便好用。

優點：

不依賴任何第三方庫
支持字符串、Date、時間戳以及數組等格式
可以同時在瀏覽器和node環境中使用
前後端通用,文檔也很詳細
方便了日常開發中對時間的操作,提高了開發效率