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;

            },

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容