要素の日付ピッカーel-date-picker個別の日付制約

elementUIには多くの日付選択コンポーネントが付属していますが、開発者に対応できないニーズが常にあります。私が遭遇した要件は、次のようにアクティビティ時間を1つに書き込むことができないことです。この

ため、「開始時間」と「終了時間」の別々の選択肢にまとめるために2つのコンポーネントしか使用できませんが、終了時間と開始時間選択には特定の制約があります。たとえば、過去の時間は選択できず、終了時間は開始時間よりも大きい必要があります。多くの試みの後、私は2つのel-date-pickerコンポーネントを選択して要件を完了し、時間制限を満たしました。言うことはあまりありません、コード！

<el-date-picker 
	v-model="form.beginTime" 
	type="datetime" 
	placeholder="起始时间" 
	:picker-options="startDatePicker" 
	:disabled="isEdit" 
	@blur="blur0" 
	@focus="focus0"
/>
<span>至</span>
<el-date-picker 
	v-model="form.endTime" 
	type="datetime" 
	placeholder="结束时间" 
	:picker-options="endDatePicker"
	@blur="blur1" 
	@focus="focus1" 
/>

data(
return{
    
    
	startDatePicker: this.beginDate(),
	endDatePicker: this.processDate(),
	}
)
//这里面有个小坑，在这之前我是直接写方法，在data里面是不可以互相取值的
//比如
data(
return{
    
    
	aa:9,
	b:this.aa+1//这句是报错的，这里获取不到a变量
}
)
//所以上面直接用this.beginDate()方法来避免这个问题，这样直接用方法返回时间选择的限制，beginDate()方法就在methods上写

//methods部分
beginDate() {
    
    
	const that = this;
	return {
    
    
		disabledDate(time) {
    
    
			if (that.form.endTime) {
    
    
				console.log(new Date(that.form.endTime).getTime())
				//如果结束时间不为空，则小于结束时间
				return (
					time.getTime() > new Date(that.form.endTime).getTime() || time.getTime() <  new Date().getTime()
				);
			} else {
    
    
				return time.getTime() < new Date().getTime()
			}
		}
	}
},
processDate() {
    
    
	const that = this;
	return {
    
    
		disabledDate(time) {
    
    
			if (that.form.beginTime) {
    
    
				//如果开始时间不为空，则结束时间大于开始时间
				return (
					time.getTime() < new Date(that.form.beginTime).getTime()
				);
			} else {
    
    
				return time.getTime() < new Date().getTime()//开始时间不选时，结束时间最大值小于等于当天
			}
		}
	}
},
disabledDate()方法是element的方法，它返回一个Boolean值，可以设置日期范围的禁止选择状态

実現効果図：

終了時刻を選択しない場合は、現在時刻から現在までの開始時刻を選択できます。終了時刻を選択すると、開始時刻は現在時刻から終了時刻までしか選択できません。

終わらせる！ここが賞賛の時です...皆さん、ありがとう