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

更新時(shí)間：2024年08月28日 10:12:03 作者：碼農(nóng)研究僧

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

前言

對(duì)于全棧玩家，各個(gè)組件都需相應(yīng)了解才可做好前后端的CRUD

以下為實(shí)戰(zhàn)結(jié)合Element官網(wǎng)的心得體會(huì)

如圖所示：

1. 通用Demo

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

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

截圖如下：

如果需要時(shí)間選擇，總體Demo如下：

<template>
  <!-- 包含快捷選項(xiàng)的日期選擇器 -->
  <div class="block">
    <!-- 演示快捷選項(xiàng) -->
    <span class="demonstration">帶快捷選項(xiàng)</span>
    <!-- 日期選擇器組件 -->
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="開始日期"
      end-placeholder="結(jié)束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 日期選擇器的選項(xiàng)
        pickerOptions: {
          // 快捷選項(xiàng)
          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]);
              }
            },
            // 最近一個(gè)月
            {
              text: '最近一個(gè)月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            // 最近三個(gè)月
            {
              text: '最近三個(gè)月',
              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)動(dòng)（各自獨(dú)立切換當(dāng)前月份），選擇日期范圍時(shí)，默認(rèn)情況下左右面板會(huì)聯(lián)動(dòng)
type為daterange，則顯示到日，若為datetimerange則顯示到秒

如果是按照默認(rèn)月份，具體如下：

<template>
  <div class="block">
    <span class="demonstration">帶快捷選項(xiàng)</span>
    <el-date-picker
      v-model="value2"
      type="monthrange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="開始月份"
      end-placeholder="結(jié)束月份"
      :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: '最近六個(gè)月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    }
  };
</script>

截圖如下：

2. 快捷鍵

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

// 時(shí)間選擇
pickerOptions: {
  shortcuts: [{
    text: '上周',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      // 設(shè)置起始日期為本周的第一天
      start.setDate(end.getDate() - end.getDay() - 6);
      // 設(shè)置結(jié)束日期為本周的最后一天
      end.setDate(end.getDate() - end.getDay() );
      picker.$emit('pick', [start, end]);
    }
  }, {
    text: '這周',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      // 設(shè)置起始日期為本周的第一天
      start.setDate(end.getDate() - end.getDay() + 1);
      // 設(shè)置結(jié)束日期為本周的最后一天
      end.setDate(end.getDate() - end.getDay() + 7);
      picker.$emit('pick', [start, end]);
    }
  }, {
    text: '下周',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      // 設(shè)置起始日期為下周的第一天
      start.setDate(end.getDate() - end.getDay() + 8);
      // 設(shè)置結(jié)束日期為下周的最后一天
      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	月	不補(bǔ)0	1
MM	月		01
W	周	僅周選擇器的 format 可用；不補(bǔ)0	1
WW	周	僅周選擇器的 format 可用	01
d	日	不補(bǔ)0	2
dd	日		02
H	小時(shí)	24小時(shí)制；不補(bǔ)0	3
HH	小時(shí)	24小時(shí)制	03
h	小時(shí)	12小時(shí)制，須和 A 或 a 使用；不補(bǔ)0	3
hh	小時(shí)	12小時(shí)制，須和 A 或 a 使用	03
m	分鐘	不補(bǔ)0	4
mm	分鐘		04
s	秒	不補(bǔ)0	5
ss	秒		05
A	AM/PM	僅 format 可用，大寫	AM
a	am/pm	僅 format 可用，小寫	am
timestamp	JS時(shí)間戳	僅 value-format 可用；組件綁定值為number類型	1483326245000
[MM]	不需要格式化字符	使用方括號(hào)標(biāo)識(shí)不需要格式化的字符 (如 [A] [MM])	MM

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

參數(shù)	說明	類型	可選值	默認(rèn)值
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	非范圍選擇時(shí)的占位內(nèi)容	string
start-placeholder	范圍選擇時(shí)開始日期的占位內(nèi)容	string
end-placeholder	范圍選擇時(shí)結(jié)束日期的占位內(nèi)容	string
type	顯示類型	string	year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange	date
format	顯示在輸入框中的格式	string	見日期格式	yyyy-MM-dd
align	對(duì)齊方式	string	left, center, right	left
popper-class	DatePicker 下拉框的類名	string
picker-options	當(dāng)前時(shí)間日期選擇器特有的選項(xiàng)參考下表	object		{}
range-separator	選擇范圍時(shí)的分隔符	string		‘-’
default-value	可選，選擇器打開時(shí)默認(rèn)顯示的時(shí)間	Date	可被new Date()解析
default-time	范圍選擇時(shí)選中日期所使用的當(dāng)日內(nèi)具體時(shí)刻	string[]	數(shù)組，長(zhǎng)度為 2，每項(xiàng)值為字符串，形如12:00:00，第一項(xiàng)指定開始日期的時(shí)刻，第二項(xiàng)指定結(jié)束日期的時(shí)刻，不指定會(huì)使用時(shí)刻 00:00:00
value-format	可選，綁定值的格式。不指定則綁定值為 Date 對(duì)象 string 見日期格式 —
unlink-panels	在范圍選擇器里取消兩個(gè)日期面板之間的聯(lián)動(dòng) boolean — false
prefix-icon	自定義頭部圖標(biāo)的類名	string		el-icon-date
clear-icon	自定義清空?qǐng)D標(biāo)的類名	string		el-icon-circle-close
validate-event	輸入時(shí)是否觸發(fā)表單的校驗(yàn)	boolean		true
append-to-body	DetePicker 自身是否插入至 body 元素上。	boolean		true

到此這篇關(guān)于ElementUI 詳細(xì)分析DatePicker 日期選擇器的文章就介紹到這了,更多相關(guān)ElementUI DatePicker 日期選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: