vant van-datetime-picker 日期组件设置选择范围当前时间到一年以内

最新推荐文章于 2024-09-05 22:04:34 发布

ougexingfuba

最新推荐文章于 2024-09-05 22:04:34 发布

阅读量1.9w

点赞数 3

分类专栏： vue vant 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/ougexingfuba/article/details/105417791

版权

本文介绍了如何在Vue.js项目中使用Vant的日期组件van-datetime-picker，设置选择范围为当前时间到一年以后。通过定义最小时间变量为当前时间，并在计算属性中计算最大时间为当前时间加一年。同时，详细说明了在methods和mounted阶段的相关配置方法，最终实现了预期的效果。

摘要由CSDN通过智能技术生成

直接贴代码

1.调用日期组件

  <van-field v-model="timeValue" @click="showPopFn()" placeholder="请选择到期日" readonly/>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker 
        v-model="currentDate" 
        type="date"
        :min-date="minDate" 
        :max-date="this.maxDate"
        @change="changeFn()" 
        @confirm="confirmFn()" 
        @cancel="cancelFn()" 
        />
    </van-popup>

2.定义变量，最小时间就是当前时间

data() {
    return {
      value: '',
      timeValue: '',
      currentDate: new Date(),
      changeDate: new Date(),
      minDate: new Date(),
      show: false, // 用来显示弹出层
    };

3. 通过计算属性算出最大时间并返回