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