ElementUI日期选择器设置可选日期为当月、当月及以后、当月及以前

最新推荐文章于 2024-01-16 15:41:15 发布

web小白呀zyy

最新推荐文章于 2024-01-16 15:41:15 发布

阅读量1.2k

点赞数 1

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/weixin_45776030/article/details/118182080

版权

本文介绍了如何使用ElementUI的日期选择器组件限制用户选择的日期范围，包括仅允许选择当月日期、当月及以后日期以及当月及以前日期。通过设置`disabledDate`属性并比较当前日期与目标日期的年月，实现不同限制条件。

摘要由CSDN通过智能技术生成

ElementUI日期选择器设置可选日期为当月、当月及以后、当月及以前

  <el-date-picker
      type="date"
      v-model="form.date"
      :picker-options="pickerOptions">
  </el-date-picker>

data(){
	return {
 		pickerOptions: {
        	disabledDate: (time) => {
         	  const date = new Date()
         	  const year = date.getFullYear()
          	  let month = date.getMonth() + 1
       		  if (month >= 1 && month <= 9) {
            	month = '0' + month
          	  }
          	  const currentdate = year.toString() + month.toString()
              const timeyear = time.getFullYear()
              let timemonth = time.getMonth() + 1
              if (timemonth >= 1 && timemonth <= 9) {
                 timemonth = '0' + timemonth
               }
              const timedate = timeyear.toString() + timemonth.toString()
              // 当月
              return timedate < currentdate || currentdate < timedate
              // 当月及以后
              // return timedate < currentdate
              // 当月及以前
              // return timedate > currentdate
             }
         }
     }
}