vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > el-date-picker选择年月

el-elementUI使用el-date-picker选择年月

作者:small面包

本文主要介绍了el-elementUI使用el-date-picker选择年月,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧

基于时间周期控件实现月周期、年周期的选择

在这里插入图片描述

<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为函数,返回值为布尔值,
      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) {
      //获取当前时间
      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>

到此这篇关于el-elementUI使用el-date-picker选择年月的文章就介绍到这了,更多相关el-element el-date-picker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文