element ui el-date-picker日期时间选择器设置只能选择不大于30天时间范围-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui el-date-picker日期时间选择器设置只能选择不大于30天时间范围。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：要求日期时间选择器只能选择最多32天，其他日期为不可点击状态。

日期组件type为daterange或者datetimerange都生效

实现（vue2.x）：

通过属性picker-options

html

<el-date-picker
 v-model="dateTime"
    type="datetimerange"
    align="right"
    range-separator="- "
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    @blur="isRestart = true"
    :default-time="['00:00:00', '23:59:59']"
    value-format="yyyy-MM-dd HH:mm:ss"
    :clearable="dateClear"
    style="width:216px;">
</el-date-picker>

data

data(
	return{
		  isRestart: false,
	      pickerMinDate: '',
	      pickerOptions: {
		      onPick: ({
		          maxDate,
		          minDate,
		      }) => {
		         this.isRestart = false;
		         this.pickerMinDate = minDate.getTime();
		         if (maxDate) {
		            this.pickerMinDate = "";
		         }
		       },
		
	          disabledDate: (time) => {
	            if (this.pickerMinDate !== "") {
	               const one = 32 * 24 * 3600 * 1000;
	               const minTime = this.pickerMinDate - one;
	               const maxTime = this.pickerMinDate + one;
	               return time.getTime() < minTime || time.getTime() > maxTime;
	            }
	          },
	      },
	}
)

效果
element ui el-date-picker日期时间选择器设置只能选择不大于30天时间范围,vue.js,elementui,element ui
参考链接：https://www.jianshu.com/p/2a07de981fab文章来源地址https://www.toymoban.com/news/detail-758392.html