VantUI时间选择器

​ 距离我上一次博客都距离五个多月了，证明我这五个月没有好好学习，自我反省下。

​ 这次写这个博客，是我工作中遇到的问题，项目是做一个h5移动端的商城。之前没用过VantUI，拿到需要用到时间选择器的时候也是捉摸了一会。

​ 大概需求是，点击弹出时间选择器，并显示时间到页面上。

​ 一开始看文档的时候也没太仔细，没看到前面的一句话时间选择组件通常与弹出层组件配合使用。如果直接按需导入，时间选择器会直接出现在页面上。

引入

​ 这里采用的按需导入。

import { Popup } from 'vant';
import { DatetimePicker } from 'vant';

Vue.use(Popup)
Vue.use(DatetimePicker);

主要代码

1. 需求主要是实现年月日的选择，type="date"，由于页面时间选择器较多（需求有四个）所以我只写了一个弹出层，选择器全部放弹出层里，通过 v-if 控制显示与隐藏

2. 开始时间不能高于当前日期，:max-date="currentTime"

3. 结束时间不能低于开始日期，:min-date="startTime"

4. cancel、confirm 为 vantUI 时间选择器提供的事件，点击取消或确认按钮触发事件，其中 confirm 有个回调参数 value 为当前选择的时间

5. 将弹出层组件套在时间选择器的组件外面，进行组合使用，需要手动在取消、确认按钮上加事件隐藏弹出层

6. formatter 调用的官方文档的formatter方法，会将选项文字进行格式化处理，如下图所示，左边是调用后的效果
   

   

​ 我这里只放了一部分代码

<template>
    <div>
        <!-- 按钮区域 -->
        <div>
            <span ref="termStart" @click="showDatePicker('termStart')">开始时间</span>
            <span ref="termEnd" @click="showDatePicker('termEnd')">结束时间</span>
        </div>
        <!-- 弹出层 -->
        <van-popup v-model="isPopShow" position="bottom">
            <!-- 开始时间 -->
            <van-datetime-picker
                @cancel="cancelPicker"
                @confirm="confirmPicker"
                v-if="datePicker == 'startTime'"
                v-model="startTime"
                type="date"
                :formatter="formatter"
                :max-date="currentTime"
             />
            <!-- 结束时间 -->
            <van-datetime-picker
                @cancel="cancelPicker"
                @confirm="confirmPicker"
                v-if="datePicker == 'endTime'"
                v-model="endTime"
                type="date"
                :formatter="formatter"
                :min-date="startTime"
             />
        </van-popup>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentTime: new Date(), // 开始时间不能超过当前时间
            startTime: new Date(), // 开始时间
            endTime: new Date(), // 结束时间
            datePicker: '', // 用于判断哪个选择器的显示与隐藏
            isPopShow: false, // 弹出层隐藏与显示
        }
    },
    methods: {
        showDatePicker(picker) { //弹出层并显示时间选择器
            this.isPopShow = true;
            this.datePicker = picker;
        },
        cancelPicker() { // 选择器取消按钮点击事件
            this.isPopShow = false;
            this.datePicker = "";
        },
        confirmPicker(value) {// 确定按钮，时间格式化并显示在页面上
            var date = value;
            var m = date.getMonth() + 1;
            var d = date.getDate();
            if (m >= 1 && m <= 9) {
                m = "0" + m;
            }
            if (d >= 0 && d <= 9) {
                d = "0" + d;
            }
            var timer = date.getFullYear() + "-" + m + "-" + d
            this.$refs[this.datePicker].innerHTML = timer;
            this.isPopShow = false;
            this.datePicker = "";
        },
        formatter(type, value) {// 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            }
            return value;
        },
    }
    
}
</script>

展示效果

按钮

1561472584970.png

时间选择器

1561472599881.png

显示时间

1561472614115.png

总结

​ 表示自己还是个小菜鸟，欢迎各路大神指点和探讨。

timg.jpg