element-ui组件中el-date-picker日期插件设置可选日期范围

最新推荐文章于 2025-03-28 10:54:55 发布

MrsTing

最新推荐文章于 2025-03-28 10:54:55 发布

阅读量1.5k

点赞数

文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_40364610/article/details/105486877

版权

本文详细介绍了如何在Vue中使用Element UI的日期选择器组件，通过设置disabledDate属性来限制用户只能选择开始时间之后及一年内的日期。同时，提供了具体的JavaScript代码实现，展示了如何根据开始时间和结束时间动态调整可选日期范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

<el-date-picker
        v-model="startTime"
        type="month"
        placeholder="开始日期"
        value-format="yyyy-MM"
        :picker-options="pickerOptions0"
        style="width: 150px;"
        @input="handleStartTime"
/el-date-picker>
<el-date-picker
        v-else-if="timeType==2"
        v-model="time"
        type="month"
        placeholder="选择年月"
        value-format="yyyy-MM"
        :picker-options="pickerOptions1"
        style="width: 150px;">
</el-date-picker>

js部分（该功能为结束时间endTime要大于开始的时间，并且只能选择一年内得时间）：

data() {
    return {
        startTime: '',
        endTime: '',
        pickerOptions0: {
	        disabledDate: (time) => {
	          const date = new Date()
	          const year = date.getFullYear()
	          let month = date.getMonth()
	          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 currentdate < timedate
	          /* if (this.endTime) {
	              let endYear = this.endTime.split('-')[0];
	              let endMonth = this.endTime.split('-')[1];
	              let end = endYear.toString()  + endMonth.toString();
	              let oneYearBefore = (parseInt(endYear)-1).toString() + endMonth.toString();
	              return oneYearBefore > timedate || timedate > end;
	            } else {
	              return currentdate < timedate;
	            }*/
	        }
	      },
     	pickerOptions1: {
	        disabledDate: (time) => {
	          const date = new Date()
	          const year = date.getFullYear()
	          let month = date.getMonth()
	          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()
	
	          if (this.startTime) {
	            //开始时间
	            const startYear = this.startTime.split('-')[0]
	            let startMonth = this.startTime.split('-')[1]
	            const start = startYear.toString() + startMonth.toString()
	            // let oneYearafter = (parseInt(startYear)+1).toString() + startMonth.toString();
	            let oneYearafter = null
	            if (parseInt(startMonth) < 2) {
	              //如果开始时间为1月份，则年份不+1，月份为12月
	              oneYearafter = startYear.toString() + '12'
	            } else {
	              //如果开始时间不是1月份，则可选的一年内得时间，年份应+1
	              startMonth = parseInt(startMonth) - 1
	              if (startMonth >= 1 && startMonth <= 9) {
	                startMonth = '0' + startMonth
	              }
	              oneYearafter = (parseInt(startYear) + 1).toString() + startMonth.toString()
	            }
	            if (oneYearafter > currentdate) {
	              return start > timedate || timedate > currentdate
	            } else {
	              return start > timedate || timedate > oneYearafter
	            }
	          } else {
	            return currentdate < timedate
	          }
	       }
	    },
    }
}