Element?el-date-picker?日期選擇器的使用
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. 帶快捷選項
有時候，我們希望可以直接選擇昨天、上周、上月，這些經(jīng)常使用的日期不需要我們?nèi)ゲ檎遥湍芸焖龠x中，此時可以借助picker-options屬性來實現(xiàn)。
代碼：
帶快捷選項
<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);
}
}]
},通過上述代碼，點擊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日期選擇器提供的功能很全面，實現(xiàn)起來也挺簡單，還是比較好用的。
到此這篇關(guān)于Element el-date-picker 日期選擇器的使用的文章就介紹到這了,更多相關(guān)Element el-date-picker 日期選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結(jié)合實例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關(guān)操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue.js項目中管理每個頁面的頭部標(biāo)簽的兩種方法
這篇文章主要介紹了Vue.js項目中管理每個頁面的頭部標(biāo)簽的兩種方法,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue在H5 項目中使用融云進(jìn)行實時個人單聊通訊,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了vue裁切預(yù)覽組件功能的實現(xiàn)代碼，本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了Vue引入高德地圖實現(xiàn)流程，實現(xiàn)步驟是通過vue的方法引入地圖，初始化地圖，設(shè)置寬和高，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
elmentui是一款為vue設(shè)計的桌面組件庫,下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
本篇文章主要介紹了Vue.js上下滾動加載組件的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法
今天小編就為大家分享一篇vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中swiper開啟loop后,點擊事件不響應(yīng)的解決方案
這篇文章主要介紹了vue中swiper開啟loop后,點擊事件不響應(yīng)的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09