@阿呜 2023-05-04 17:11 采纳率: 42.9%
浏览 106
已结题

Vant的日历组件,怎么默认当天时间?

Vant的日历组件,想要选择今天之前的日期,设置了最小可选日期min-date(比如是2020-01-01),日历弹起之后默认就是从2020-01-01开始,这个可以改变吗,想要默认是当前的时间

img

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2023-05-04 17:22
    关注
    
    <van-calendar
      v-model="currentDate"
      :min-date="minDate"
      :default-date="defaultDate"
    ></van-calendar>
    
    
    export default {
      data() {
        return {
          currentDate: new Date(), // 当前日期
          minDate: new Date('2020-01-01'), // 最小可选日期
        };
      },
      computed: {
        defaultDate() {
          // 默认日期为当前日期
          let defaultDate = new Date();
          // 如果默认日期早于最小可选日期,则将默认日期设置为最小可选日期
          if (defaultDate < this.minDate) {
            defaultDate = new Date(this.minDate);
          }
          return defaultDate;
        },
      },
      mounted() {
        // 在 mounted 钩子函数中更新 currentDate
        this.currentDate = this.defaultDate;
      },
    };
    

    在 Vant 的日历组件中,如果想要设置最小可选日期 min-date,但是又想默认显示当前日期,可以通过设置 default-date 属性来实现。
    具体来说,可以将 default-date 属性设置为当前日期,然后在 mounted 钩子函数中判断当前日期是否早于最小可选日期,如果早于,则将 default-date 属性设置为最小可选日期。
    在这个例子中,我们将 default-date 属性设置为一个计算属性 defaultDate,该属性的值为当前日期或最小可选日期中较晚的一个。然后在 mounted 钩子函数中将 currentDate 更新为 defaultDate。这样就可以实现默认显示当前日期,如果最小可选日期早于当前日期,则默认显示最小可选日期。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月23日
  • 已采纳回答 5月15日
  • 创建了问题 5月4日