vant日期选择组件

vant组件库

全局安装vant组件库，npm i vant -S。然后在main.js中：

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

使用用法

<template>
  <div class="home">
    <van-button type="primary" @click="showPopup">主要按钮</van-button>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="请选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
        @cancel="cancel"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>

<script type="text/javascript">
export default {
  name: 'Home',
  data () {
    return {
      show: false,
      minDate: new Date(2016, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(), // 默认选中当天日期
    }
  },
  mounted () {
    /**
     * 特殊需求：选择日期的最大日期、最小日期；默认选中当天的日期
     * 日期的最小值可以自定义，
     * 但是日期的最大值 就是 默认选中当天的日期
     */
    
    // 自定义日期的最小值
    var time1 = 2010
    var time2 = 2
    var time3 = 8
    this.minDate = new Date(time1, time2, time3)
  },
  methods: {
    // 日期组件自定义格式
    formatter (type, value) {
      if (type === 'year') {
        this.value1 = value   // 可以拿到当前点击的数值
        return `${value}年`
      } else if (type === 'month') {
        this.value2 = value
        return `${value}月`
      }
      this.value3 = value
      return `${value}日`
    },
    showPopup () {
      this.show = true;
    },
    confirm () {
      var selectTime = `${this.value1}年${this.value2}月${this.value3}日`
      console.log('用户选择的日期', new Date(this.currentDate).getTime(), selectTime);
      this.show = false;
    },
    cancel () {
      this.show = false;
    }
  }
}
</script>

<style lang="scss" scoped>
</style>