vant日期选择组件（默认选中当天日期）

迈不过友情╰ 2022-11-03 11:57 2364阅读 0赞

# vant日期选择组件 #

[vant组件库][vant]

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

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

## 使用用法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70]

<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>

[vant]: https://youzan.github.io/vant/#/zh-CN/datetime-picker
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70]: /images/20221024/9c86737dd70f41dbba59d88463c9a59b.png