el-elementUI使用el-date-picker選擇年月
更新時間:2024年02月05日 15:50:09 作者:small面包
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
基于時間周期控件實現(xiàn)月周期、年周期的選擇

<el-date-picker
v-model="gysForm.year"
type="year"
placeholder="選擇日期"
format="yyyy"
value-format="yyyy"
style="width: 100%;"
:picker-options="pickerOptions"
/>
data(){
return{
gysForm:{
year:''
}
}
},
methods:{
pickerOptions: {
//disabled為函數(shù),返回值為布爾值,
disabledDate: (time) => {
let minYear = new Date().getFullYear() - 30
return time > Date.now() || time.getTime() < new Date(JSON.stringify(minYear))
}
},
}
選擇年月

<el-date-picker v-model="selectMonth" type="month" placeholder="選擇月" @change="jobSearch" value-format="yyyy-MM"></el-date-picker>
<script>
export default {
data() {
return {
selectMonth:''
}
},
created() {
this.initData({});
},
methods: {
jobSearch() {
this.getJobListByMonth();
},
async initData(data) {
//獲取當(dāng)前時間
var now = new Date();
var monthn = now.getMonth()+1;
var yearn = now.getFullYear();
this.selectMonth = yearn+"-"+monthn;
this.selectUser = parseInt(sessionStorage.getItem("userid"));
// this.getWeekJobList({
// userid: sessionStorage.getItem("userid"),
// weekid: "1"
// });
this.getJobListByMonth();
},
async getJobListByMonth(data) {
}
}
}
</script>到此這篇關(guān)于el-elementUI使用el-date-picker選擇年月的文章就介紹到這了,更多相關(guān)el-element el-date-picker內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue router導(dǎo)航守衛(wèi)(router.beforeEach())的使用詳解
導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這篇文章主要介紹了vue-router導(dǎo)航守衛(wèi)(router.beforeEach())的使用,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
vue使用動態(tài)組件實現(xiàn)TAB切換效果完整實例
在實際項目開發(fā)中,我們經(jīng)常會遇到選項卡切換,對于一個前端工程師來說,組件化/模塊化開發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue使用動態(tài)組件實現(xiàn)TAB切換效果的相關(guān)資料,需要的朋友可以參考下2023-05-05
基于vue-cli、elementUI的Vue超簡單入門小例子(推薦)
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡單入門小例子,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04

