快捷導(dǎo)航

Element?el-date-picker?日期選擇器的使用

更新時(shí)間：2023年04月30日 11:18:26 作者：程序員大陽(yáng)

本文主要介紹了Element?el-date-picker?日期選擇器的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 前言

日期選擇器用來(lái)選擇一個(gè)或者多個(gè)日期，例如選擇某個(gè)人的生日，再例如選擇訂單的創(chuàng)建日期，應(yīng)用還是非常普遍的。

本篇就來(lái)介紹下Element提供的日期選擇器的常見(jiàn)用法。

2. 基本用法

編寫html代碼如下：

選擇任意日期：
    <el-date-picker v-model="value" type="date" placeholder="選擇日期" @change="dateChange"> 
    </el-date-picker>

如上代碼會(huì)顯示一個(gè)日期選擇器，且選中日期的值綁定了value變量，且當(dāng)選中日期發(fā)生變化時(shí)，會(huì)觸發(fā)dateChange方法。

對(duì)應(yīng)效果如下：

3. 日期格式化

有時(shí)候我們需要，按照我們?cè)O(shè)定的格式，來(lái)處理綁定的日期值，可以通過(guò)value-format屬性來(lái)指定格式，常用的格式化字符串包括：

yyyy 年
MM 月
WW 周
dd 日
HH 時(shí) (24小時(shí)制)
hh 時(shí) (12小時(shí)制)
mm 分鐘
ss 秒

所以，如果按照MySQL數(shù)據(jù)庫(kù)對(duì)日期字符串格式化要求，我們編寫代碼如下：

日期格式化:{{value}}
    <el-date-picker v-model="value" type="date" placeholder="選擇日期" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>

選中某個(gè)日期后，對(duì)應(yīng)效果如下，可見(jiàn)value已經(jīng)被格式化：

4. 選擇其他日期單位

除了選中某一天，有時(shí)候我們還會(huì)面臨，選擇某一周、某個(gè)月份、某個(gè)年份的需求，此時(shí)可以通過(guò)type屬性來(lái)設(shè)置。

例如：

選擇其他日期單位
    <el-date-picker v-model="valueWeek" type="week" format="yyyy 第WW周" placeholder="選擇周">
    </el-date-picker>
    <el-date-picker v-model="valueMonth" type="month" placeholder="選擇月">
    </el-date-picker>
    <el-date-picker v-model="valueYear" type="year" placeholder="選擇年">
    </el-date-picker>

效果：

5. 選擇多個(gè)日期

el-date-picker還支持選中多個(gè)日期，通過(guò)將type屬性值設(shè)置為dates即可。

選擇多個(gè)日期
    <el-date-picker type="dates" v-model="valueDates" placeholder="選擇一個(gè)或多個(gè)日期">
    </el-date-picker>

效果：

6. 帶快捷選項(xiàng)

有時(shí)候，我們希望可以直接選擇昨天、上周、上月，這些經(jīng)常使用的日期不需要我們?nèi)ゲ檎?，就能快速選中，此時(shí)可以借助picker-options屬性來(lái)實(shí)現(xiàn)。

代碼：

帶快捷選項(xiàng)
    <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsFast" placeholder="選擇日期">
    </el-date-picker>

  optionsFast: {
        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);
          }
        }]
      },

通過(guò)上述代碼，點(diǎn)擊text對(duì)應(yīng)按鈕，即可將我們代碼編寫的值選中，效果如下：

7. 禁用部分日期

通過(guò)picker-options還可以禁用部分日期，代碼：

 	禁用部分日期
    <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsDisable" placeholder="選擇日期">
    </el-date-picker>

 	  optionsDisable: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      }

效果如下：

8. 小結(jié)

el-date-picker日期選擇器提供的功能很全面，實(shí)現(xiàn)起來(lái)也挺簡(jiǎn)單，還是比較好用的。

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

您可能感興趣的文章: