(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;
},