mint ui 时间选择器的使用

主要功能：

• 实现两个时间选择器
• 手机端屏蔽键盘
• 数据回显

H5代码

<li class="input-line g-arrow-r">
                            <label>开始时间</label>
                            <div class="input-box">
                                <span @click="openPicker(0)" class="picker">{{form.date1 ? form.date1 : '请选择'}}</span>
                                <mt-datetime-picker
                                        v-model="pickerVisible"
                                        ref="start"
                                        type="datetime"
                                        month-format="{value} 月"
                                        date-format="{value} 日"
                                        hour-format="{value} 时"
                                        minute-format="{value} 分"
                                        :startDate="startDate"
                                        :editable=false
                                        @confirm="handleConfirm(0)">
                                </mt-datetime-picker>
                            </div>
                        </li>
                        <!--结束时间-->
                        <li class="input-line g-arrow-r">
                            <label>结束时间</label>
                            <div class="input-box">
                                <span @click="openPicker(1)" class="picker">{{form.date2 ? form.date2 : '请选择'}}</span>
                                <mt-datetime-picker
                                        v-model="pickerVisible"
                                        ref="end"
                                        type="datetime"
                                        month-format="{value} 月"
                                        date-format="{value} 日"
                                        hour-format="{value} 时"
                                        minute-format="{value} 分"
                                        :startDate="startDate"
                                        :editable=false
                                        @confirm="handleConfirm(1)">
                                </mt-datetime-picker>
                            </div>
                        </li>

JS代码

// 打开时间选择器
            openPicker(item) {
                // 设置默认开始时间
                this.pickerVisible = new Date();
                if (item === 0) {
                    this.$refs.start.open()
                } else {
                    this.$refs.end.open()
                }
            },
            // 时间选择器确定按钮
            handleConfirm(item) {
                // console.log(this.pickerVisible);
                if (this.pickerVisible !== "") {
                    if (item === 0) {
                        this.form.date1 = dateFormat(this.pickerVisible);
                    } else {
                        this.form.date2 = dateFormat(this.pickerVisible);
                    }
                }
            },

picker样式文件

<style scoped>
    .picker{
        height:21px;
        width:100%;
        display:block
    }
</style>

实现的效果