亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2023年04月30日 11:18:26   作者：程序員大陽  
本文主要介紹了Element?el-date-picker?日期選擇器的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 前言

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

本篇就來介紹下Element提供的日期選擇器的常見用法。

2. 基本用法

編寫html代碼如下：

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

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

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

3. 日期格式化

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

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

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

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

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

4. 選擇其他日期單位

除了選中某一天，有時候我們還會面臨，選擇某一周、某個月份、某個年份的需求，此時可以通過type屬性來設(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. 選擇多個日期

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

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

效果：

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

有時候，我們希望可以直接選擇昨天、上周、上月，這些經(jīng)常使用的日期不需要我們?nèi)ゲ檎?，就能快速選中，此時可以借助picker-options屬性來實(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);
          }
        }]
      },

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

7. 禁用部分日期

通過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)起來也挺簡單，還是比較好用的。

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

相關(guān)文章

最新評論