要件: 開始時刻と終了時刻は 2 つの項目であり、開始時刻は現在時刻より大きく、終了時刻は開始時刻より大きく、時刻が正確です。
htmlコード:
<el-date-picker
v-model="bgnDate"
type="datetime"
placeholder="开始日期"
:picker-options="pickerOptions0"
@change="changetime">
</el-date-picker>
至
<el-date-picker
v-model="endDate"
type="datetime"
placeholder="结束日期"
:picker-options="pickerOptions1"
:default-time="defaultTime"
@change="endTimeChange"
>
</el-date-picker>
制限の開始時刻が現在時刻よりも大きいです (ただし、現在の日付はオプションです)
data(){
return{
bgnDate:'',
endDate:'',
pickerOptions0: {
disabledDate: (time) => {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
終了時間を制限する
computed:{
//默认结束时间
defaultTime(){
if(!this.bgnDate){
return
}
let hours = this.bgnDate.getHours();//时
let min = this.bgnDate.getMinutes();//分
let second = this.bgnDate.getSeconds();//秒
//默认比开始时间多一秒
return hours+':'+min+':'+(second+1)
},
//结束时间限制规则
pickerOptions1(){
if(!this.bgnDate){
return
}
//前推一天,防止当天日期无法选择
let hours = this.bgnDate.getHours();//时
let min = this.bgnDate.getMinutes();//分
let second = this.bgnDate.getSeconds();//秒
//如果开始时间是0点的话则不用再减一天,如果不是0点则减一天,防止结束时间不能选开始时间这一天
let preTime =hours == '00'&&min == '00'&&second == '00'?
new Date(this.bgnDate).getTime() :
new Date(this.bgnDate).getTime() - 8.64e7;
let str = ""
let k = false
if(this.endDate){
//判断结束时间和开始时间是否是同一天
k = (this.bgnDate.getFullYear() ==this.endDate.getFullYear()) &&
(this.bgnDate.getMonth() ==this.endDate.getMonth()) &&
(this.bgnDate.getDate() ==this.endDate.getDate())
}
//如果是同一天,则秒数+1
if(k){
let hours = this.bgnDate.getHours();//时
let min = this.bgnDate.getMinutes();//分
let second = this.bgnDate.getSeconds();//秒
str=hours+':'+min+':'+ (second+1)
}else{
str = "00:00:00"
}
return {
//控制日期不可选开始时间之前
disabledDate: (time) => {
return time.getTime() < preTime ;
},
//控制时间只能选以上代码限制的部分
selectableRange: str + " - 23:59:59"
}
},
}
この時点では問題ないと言えますが、1 つ理解できないのは、開始時刻を複数選択しても、デフォルトの終了時刻が更新されないことです。更新します。1 回だけクリックした場合は、すぐに [OK] をクリックしてください。図に示すように、更新の制限時間は無効です。
理由が分からなかったので終了時間の変更イベントに制限を設けました(さらに面倒)
methods: {
//控制结束时间大于开始时间
endTimeChange(val){
if(!this.bgnDate){
this.$message('请先选择开始时间')
this.endDate = ''
return
}
//通过比较时间戳,如果结束时间小与开始时间
if(new Date(val).getTime()<=new Date(this.bgnDate).getTime()){
let year = new Date(val).getFullYear();//年
let month = new Date(val).getMonth();//月
let day = new Date(val).getDate();//日
let hours = new Date(this.bgnDate).getHours();//时
let min = new Date(this.bgnDate).getMinutes();//分
let second = new Date(this.bgnDate).getSeconds()+1;//秒
//取已选择的结束时间的日期,和已选择的开始时间的时刻秒数+1,实现结束日期一定大于开始日期
let time = year.toString() +'-'+
((month + 1) > 9 ? (month + 1).toString() : "0" + (month + 1).toString()) +'-'+
(day > 9 ? day.toString() : ("0" + day).toString())
+ " " +
(hours > 9 ? hours.toString() : ("0" + hours).toString()) + ":" +
(min > 9 ? min.toString() : ("0" + min).toString()) + ":" +
(second > 9 ? second.toString() : ("0" + second).toString());
//转化成需要的格式
this.endDate = new Date(time)
}
},
}
これまでのところ、要件は満たされています。いつの日か、どこが間違っているかが分かることを願っています