vant 时间组件 开始时间 - 结束时间


(1)html元素

  <van-row :gutter="10" >
     <van-col span="12">
        <input type="text" v-model="info_form.breakfast.start_value" @click="info_form.breakfast.start_time_pop = true" readonly="readonly" placeholder="开始时间" class="van-field__control">  
        <van-popup v- model="info_form.breakfast.start_time_pop" position="bottom" :style="{ height: '50%' }">
            <van-datetime-picker v-model="info_form.breakfast.startTime" type="time" @confirm="breakfast_startConfirm()" @cancel="info_form.breakfast.start_time_pop = false"></van-datetime-picker>
        </van-popup>
     </van-col>
     <van-col span="12">
        <input type="text" v-model="info_form.breakfast.end_value" @click="info_form.breakfast.end_time_pop = true" readonly="readonly" placeholder="结束时间" class="van-field__control">
        <van-popup v-model="info_form.breakfast.end_time_pop" position="bottom"  :style="{ height: '50%' }">
             <van-datetime-picker v-model="info_form.breakfast.endTime" type="time" @confirm="breakfast_end_confirm()" :min-hour="info_form.breakfast.min_hour" :min-minute='info_form.breakfast.min_minute' @cancel="info_form.breakfast.end_time_pop = false">
        </van-datetime-picker>
        </van-popup>
      </van-col>
  </van-row>

(2)data数据

breakfast: {
               min_minute: '',
               min_hour: '',
               start_value: '',
               start_time_pop: false,
               startTime: '',
               end_value: '',
               end_time_pop: false,
               endTime: '',
},

(3)methods

// 早餐时间 - 开始时间
breakfast_startConfirm() { // 确定按钮
       this.info_form.breakfast.start_value = this.info_form.breakfast.startTime;
       this.info_form.breakfast.start_time_pop = false;
       // 手动修改结束时间的最小小时和最小分钟
       // split(":")为指定分割字符;[0]为分割后取前面的值,[1]为分割后取后面的值
       this.info_form.breakfast.min_hour = this.info_form.breakfast.startTime.split(":")[0];
       this.info_form.breakfast.min_minute = this.info_form.breakfast.startTime.split(":")[1];
},
// 早餐时间 - 结束时间
breakfast_end_confirm() { // 确定按钮
       this.info_form.breakfast.end_value = this.info_form.breakfast.endTime;
       this.info_form.breakfast.end_time_pop = false;
},


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM