Element提供了时间日期选择器的UI组件,那么如去限制起止时间呢?这里提供两种方式。1)时间范围限制;2)时间起止时间限定。

1、时间范围限制

限定时间范围,超出范围,弹出提示,并且清空iinput内容,如图所示:

界面:

<div class="block">
	<el-date-picker v-model="startDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
	    style="width:100%;max-width: 300px" value-format="yyyy-MM-dd" @change="handleStartDateChange">
	</el-date-picker>
</div>

方法:

      data() {
			return {
				startDate: '',
		},	
      methods: {
			handleStartDateChange() {
				if (this.startDate && this.startDate.length > 0) {
					const timestampBegin = +new Date(this.startDate[0])
					const timestampEnd = +new Date(this.startDate[1])
					if (timestampEnd > timestampBegin + 3600 * 1000 * 24 * 10) {
						this.$alert('日期的起止时间跨度不能超过10天', '提示', {
								confirmButtonText: '确定',
								type: 'warning'
							})
							.then(() => (this.startDate = null))
							.catch(() => (this.startDate = null))
					}
				}
			},
		}

2) 时间起止时间限定

先选的日期会限制后选的时间,如果先选起始时间,就会限制终止时间的选择,反之,终止时间限制起始时间的选择,如图所示:

界面:

<div class="block">
	<el-date-picker v-model="deskStartDate" type="date" placeholder="起始日期" style="width:100%;max-width: 300px" format="yyyy-MM-dd"
			 :picker-options="pickerOptionsStart">
	</el-date-picker>
</div>
	<div class="block">
		<el-date-picker v-model="deskEndDate" type="date" placeholder="终止日期" style="width:100%;max-width: 300px" format="yyyy-MM-dd"
			 :picker-options="pickerOptionsEnd">
	  </el-date-picker>
</div>

方法:

queryDay: 10就是控制起止日期的范围大小,这里可选范围是10天

data() {
			return {
				deskStartDate: '',
				deskEndDate: '',
				queryDay: 10,
				pickerOptionsStart: {
					disabledDate: time => {
						if (this.deskEndDate) {
							return time.getTime() > new Date(this.deskEndDate).getTime() || time.getTime() < new Date(this.deskEndDate).getTime() -
								this.queryDay * 24 * 60 * 60 * 1000
						}

					}
				},
				pickerOptionsEnd: {
					disabledDate: time => {
						if (this.deskStartDate) {
							return time.getTime() < new Date(this.deskStartDate).getTime() || time.getTime() > new Date(
								this.deskStartDate).getTime() + this.queryDay * 24 * 60 * 60 * 1000
						}

					}
				}
			}
		}

 

Logo

前往低代码交流专区

更多推荐