ElementUI 詳細分析DatePicker 日期選擇器實戰(zhàn)

更新時間：2024年08月28日 10:12:03 作者：碼農研究僧

這篇文章主要介紹了ElementUI詳細分析DatePicker 日期選擇器實戰(zhàn)教程,本文通過實例代碼圖文介紹給大家講解的非常詳細,感興趣的朋友跟隨小編一起看看吧

前言

對于全棧玩家，各個組件都需相應了解才可做好前后端的CRUD

以下為實戰(zhàn)結合Element官網(wǎng)的心得體會

如圖所示：

1. 通用Demo

如果只想要一個選擇日期，而不是范圍，Demo如下：

<template>
  <div class="block">
    <span class="demonstration">默認</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="選擇日期">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">帶快捷選項</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="選擇日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

截圖如下：

如果需要時間選擇，總體Demo如下：

<template>
  <!-- 包含快捷選項的日期選擇器 -->
  <div class="block">
    <!-- 演示快捷選項 -->
    <span class="demonstration">帶快捷選項</span>
    <!-- 日期選擇器組件 -->
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 日期選擇器的選項
        pickerOptions: {
          // 快捷選項
          shortcuts: [
            // 最近一周
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            // 最近一個月
            {
              text: '最近一個月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            // 最近三個月
            {
              text: '最近三個月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },
        // 綁定的值1
        value1: '',
        // 綁定的值2
        value2: ''
      };
    }
  };
</script>

具體的參數(shù)解釋如下：

unlink-panels解除左右面板的聯(lián)動（各自獨立切換當前月份），選擇日期范圍時，默認情況下左右面板會聯(lián)動
type為daterange，則顯示到日，若為datetimerange則顯示到秒

如果是按照默認月份，具體如下：

<template>
  <div class="block">
    <span class="demonstration">帶快捷選項</span>
    <el-date-picker
      v-model="value2"
      type="monthrange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="開始月份"
      end-placeholder="結束月份"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六個月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    }
  };
</script>

截圖如下：

2. 快捷鍵

對于快捷鍵選項除了實現(xiàn)上述方案還可如下：

// 時間選擇
pickerOptions: {
  shortcuts: [{
    text: '上周',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      // 設置起始日期為本周的第一天
      start.setDate(end.getDate() - end.getDay() - 6);
      // 設置結束日期為本周的最后一天
      end.setDate(end.getDate() - end.getDay() );
      picker.$emit('pick', [start, end]);
    }
  }, {
    text: '這周',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      // 設置起始日期為本周的第一天
      start.setDate(end.getDate() - end.getDay() + 1);
      // 設置結束日期為本周的最后一天
      end.setDate(end.getDate() - end.getDay() + 7);
      picker.$emit('pick', [start, end]);
    }
  }, {
    text: '下周',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      // 設置起始日期為下周的第一天
      start.setDate(end.getDate() - end.getDay() + 8);
      // 設置結束日期為下周的最后一天
      end.setDate(end.getDate() - end.getDay() + 14);
      picker.$emit('pick', [start, end]);
    }
  }]
},

截圖如下：

pickerOptions: {
  disabledDate(time) {
    return time.getTime() > Date.now();
  },
  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);
    }
  }]
},

截圖如下：

3. 參數(shù)

更多的參數(shù)解釋如下：

格式	含義	備注	例子
yyyy 年			2017
M	月	不補0	1
MM	月		01
W	周	僅周選擇器的 format 可用；不補0	1
WW	周	僅周選擇器的 format 可用	01
d	日	不補0	2
dd	日		02
H	小時	24小時制；不補0	3
HH	小時	24小時制	03
h	小時	12小時制，須和 A 或 a 使用；不補0	3
hh	小時	12小時制，須和 A 或 a 使用	03
m	分鐘	不補0	4
mm	分鐘		04
s	秒	不補0	5
ss	秒		05
A	AM/PM	僅 format 可用，大寫	AM
a	am/pm	僅 format 可用，小寫	am
timestamp	JS時間戳	僅 value-format 可用；組件綁定值為number類型	1483326245000
[MM]	不需要格式化字符	使用方括號標識不需要格式化的字符 (如 [A] [MM])	MM

對于日期選擇的更多參數(shù)說明：

參數(shù)	說明	類型	可選值	默認值
value / v-model	綁定值	date(DatePicker) / array(DateRangePicker)
readonly	完全只讀	boolean		false
disabled	禁用	boolean		false
editable	文本框可輸入	boolean		true
clearable	是否顯示清除按鈕	boolean		true
size	輸入框尺寸	string	large, small, mini
placeholder	非范圍選擇時的占位內容	string
start-placeholder	范圍選擇時開始日期的占位內容	string
end-placeholder	范圍選擇時結束日期的占位內容	string
type	顯示類型	string	year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange	date
format	顯示在輸入框中的格式	string	見日期格式	yyyy-MM-dd
align	對齊方式	string	left, center, right	left
popper-class	DatePicker 下拉框的類名	string
picker-options	當前時間日期選擇器特有的選項參考下表	object		{}
range-separator	選擇范圍時的分隔符	string		‘-’
default-value	可選，選擇器打開時默認顯示的時間	Date	可被new Date()解析
default-time	范圍選擇時選中日期所使用的當日內具體時刻	string[]	數(shù)組，長度為 2，每項值為字符串，形如12:00:00，第一項指定開始日期的時刻，第二項指定結束日期的時刻，不指定會使用時刻 00:00:00
value-format	可選，綁定值的格式。不指定則綁定值為 Date 對象 string 見日期格式 —
unlink-panels	在范圍選擇器里取消兩個日期面板之間的聯(lián)動 boolean — false
prefix-icon	自定義頭部圖標的類名	string		el-icon-date
clear-icon	自定義清空圖標的類名	string		el-icon-circle-close
validate-event	輸入時是否觸發(fā)表單的校驗	boolean		true
append-to-body	DetePicker 自身是否插入至 body 元素上。	boolean		true