[JavaScript知识库] vue+vant日期时间校验开始时间小于结束时间

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue+vant日期时间校验开始时间小于结束时间 -> 正文阅读

[JavaScript知识库]vue+vant日期时间校验开始时间小于结束时间

需求：日期（只能选择今天及之后的）时间（如果日期是今天，时间只能选当前时间之后的）开始时间小于结束时间
在这里插入图片描述
Html

<div class="p-t-10 f-r" style="align-items: center;">
    <span class="t-r p-r-10 w-30">选择日期:</span>
     <a-date-picker 
         @change="onChangeData" 
         v-model="form.meetingDate" 
         class="w-60" 
         :disabled-date="disabledDate"
     />
 </div>
 <div class="p-t-10 f-r" style="align-items: center;">
     <span class="t-r p-r-10 w-30">选择时间:</span>
     <div class="w-60 f-r">
         <a-time-picker class="w-50" 
             @change="onChangeTime1" 
             placeholder="请选择开始时间" 
             :value="getTime(this.form.startTimeStr)" 
             format="HH:mm"
             :disabled-time="disabledStartTime"
             :disabledHours="disabledhours"
             :disabledMinutes ="disabledMinutes"
         />
         -
         <a-time-picker 
             class="w-50" 
             @change="onChangeTime2" 
             placeholder="请选择结束时间" 
             :value="getTime(this.form.endTimeStr)" 
             format="HH:mm"
             :disabledHours="disabledhours"
             :disabledMinutes ="disabledMinutes"
         />
     </div>
 </div>

//日期
onChangeData(data){
    if(data){
        this.form.meetingDate = data.format('YYYY-MM-DD');
    }else{
        this.form.meetingDate = "";
    }
},
//日期禁选今天之前
disabledDate(current) {
    return current && current < moment().startOf('day');
},


// 时间格式化
getTime(time){
    return time? moment(time,"HH:mm"):null
},
//开始时间选择
onChangeTime1(time) {
    if(!time){
        this.form.startTimeStr = "";
    }else{
        if (this.form.endTimeStr) {
            // 判断结束时间大于开始时间
            if(this.form.endTimeStr > moment(time._d).format("HH:mm")){
                this.form.startTimeStr = moment(time._d).format("HH:mm");
            }else{
                this.$message.warn("结束时间不能小于开始时间!");
            }
        } else {
            this.form.startTimeStr = moment(time._d).format("HH:mm");
        }
    }
},
//结束时间选择事件
onChangeTime2(time) {
    if(!time){
         this.form.endTimeStr = "";
     }else{
         if (this.form.startTimeStr) {
             //  判断结束时间大于开始时间
             if(this.form.startTimeStr < moment(time._d).format("HH:mm")){
                 this.form.endTimeStr = moment(time._d).format("HH:mm");
             }else{
                 this.$message.warn("结束时间不能小于开始时间!");
             }
         } else {
             this.form.endTimeStr = moment(time._d).format("HH:mm");
         }
     }
 },
 //禁用时间区域
 disabledhours(){
     let date = new Date();
     let n= date .getFullYear(); //获取完整的年份(4位)
     let y= date .getMonth()+1; //获取当前月份(0-11,0代表1月)
     if(y<10){
         y='0'+y
     }
     let r= date .getDate(); //获取当前日(1-31)
     if(r<10){
         r='0'+r
     }
     let newDate= n+'-'+y+'-'+r;
     let hours = [];
     let time = 0;
     if(this.form.meetingDate && this.form.meetingDate == newDate){
         time = new Date().getHours();
     }else{
         time = 0;
     }
    
     for (let i = 0; i < time; i++) {
         hours.push(i)
     }
     return hours
 },
 disabledMinutes(){
     let date = new Date();
     let n= date .getFullYear(); //获取完整的年份(4位)
     let y= date .getMonth()+1; //获取当前月份(0-11,0代表1月)
     if(y<10){
         y='0'+y
     }
     let r= date .getDate(); //获取当前日(1-31)
     if(r<10){
         r='0'+r
     }
     let newDate= n+'-'+y+'-'+r;
     let hours = [];
     let time = 0;
     if(this.form.meetingDate && this.form.meetingDate == newDate){
         time = new Date().getMinutes();
     }else{
         time = 0;
     }
    
     for (let i = 0; i < time; i++) {
         hours.push(i)
     }
     return hours
 },

在这里插入图片描述