要素 UI の el-date-picker は時間制限を行います
-
現在の日付に基づいて、将来の時刻を選択することはできません。
-
選択した最初の日付に基づいて、前後 7 日間のみ選択できます (数日間は自分で設定できます)。
エル日付ピッカー
<el-date-picker
v-model="timeVal"
@change="changeDataTime"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
1 つ目の制限:現在の日付に基づいて、将来の時刻を選択することはできません。
data(){
return {
//给的默认时间
timeVal: [new Date()- 3600 * 1000 * 24 * 3, new Date()],
pickerOptions: {
disabledDate(time) {
// 这个是当前日期后的日期不可选
return time.getTime() > Date.now()
}
}
}
}
2 番目の制限:最初に選択した日付に基づいて、前後 7 日間のみ選択できます (数日間は自分で設定できます)。
data(){
// 不写这一句 disabledDate中的pickerOneDate 会报undifine
var that = this;
return {
//给的默认时间
timeVal: [new Date()- 3600 * 1000 * 24 * 3, new Date()],
// 用于已选择的第一个时间
pickerOneDate: new Date()- 3600 * 1000 * 24 * 3,
pickerOptions: {
// 获取选择的第一个时间
onPick: (obj) => {
// 把第一个时间分配给pickerOneDate
let startDate = new Date(obj.minDate).getTime();;
that.pickerOneDate = startDate;
},
disabledDate(time) {
if (that.pickerOneDate) {
// 自己配置选择几天，我这是6天
const day = 6 * 24 * 3600 * 1000
let maxTime = that.pickerOneDate + day
let minTime = that.pickerOneDate - day
return time.getTime() > maxTime || time.getTime() < minTime || time.getTime() > Date.now()
} else {
// 这个是当前日期后的日期不可选，没有这个需求可删掉
return time.getTime() > Date.now()
}
},
},
}
}