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

 更新时间:2024年02月05日 15:50:09   作者: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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vuex实现及简略解析(小结)

    vuex实现及简略解析(小结)

    这篇文章主要介绍了vuex实现及简略解析(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue实现点击按钮下载文件功能

    vue实现点击按钮下载文件功能

    这篇文章主要介绍了vue中点击按钮下载文件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue+echarts实现进度条式柱状图

    vue+echarts实现进度条式柱状图

    这篇文章主要为大家详细介绍了vue+echarts实现进度条式柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue.js指令v-model使用方法

    vue.js指令v-model使用方法

    这篇文章主要为大家详细介绍了vue.js指令v-model的使用方法 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue深入讲解数据响应式原理

    Vue深入讲解数据响应式原理

    应用会对用户的操作进行反馈,就叫响应式,数据变化会实时改变UI,就叫数据响应式,修改Vue实例中的数据时,视图会重新渲染,就是Vue的数据响应式
    2022-05-05
  • Vue-cli4 配置 element-ui 按需引入操作

    Vue-cli4 配置 element-ui 按需引入操作

    这篇文章主要介绍了Vue-cli4 配置 element-ui 按需引入操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue集成chart.js的实现方法

    vue集成chart.js的实现方法

    这篇文章主要介绍了vue集成chartjs的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vuex如何在非组件中调用mutations方法

    vuex如何在非组件中调用mutations方法

    这篇文章主要介绍了vuex如何在非组件中调用mutations方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue 路由跳转打开新窗口被浏览器拦截问题处理

    vue 路由跳转打开新窗口被浏览器拦截问题处理

    这篇文章主要介绍了vue 路由跳转打开新窗口被浏览器拦截问题处理,下面文章操作中所遇到相关问题解决的内容介绍详细,需要的小伙伴可以参考一下
    2022-03-03
  • Vue-Ant Design Vue-普通及自定义校验实例

    Vue-Ant Design Vue-普通及自定义校验实例

    这篇文章主要介绍了Vue-Ant Design Vue-普通及自定义校验实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论