小程序使用vant Calendar 日历 设置规定时间是当前月份

在Vant UI库的小程序项目中，如果你想要设置Calendar组件显示为当前月份，并且允许用户只能选择特定的时间范围，你可以按照以下步骤操作：

1. 首先，在小程序的页面文件（如`index.wxml`）中引入Vant的Calendar组件，并添加到页面结构中：

<view>
  <van-calendar v-model="calendarValue" :date-format="dateFormat"></van-calendar>
</view>

2. 然后，在对应的JS文件（如`index.js`）里，初始化并管理`calendarValue`状态，并设置日期格式：

Page({
  data() {
    return {
      calendarValue: {
        // 初始化为当前月份
        date: new Date(),
        startMonth: this.date.getFullYear(), // 月初年份
        endMonth: this.date.getFullYear() + 1, // 下月年份
      },
      dateFormat: 'yyyy-MM-dd',
    };
  },
  ...其他生命周期方法
})

3. 使用`date-range`属性限制用户的选择范围，只允许选择当前及上个月、下个月的日期：

<van-calendar v-model="calendarValue"
              :date-format="dateFormat"
              :date-range="[calendarValue.date, { year: calendarValue.endMonth, month: 0 }]">
</van-calendar>

4. 如果你需要在用户点击日历时自动更新范围，可以在`bind:pick`事件回调中处理：

bind:pick(e) {
  const selectedDate = e.detail.value;
  // 检查选中的日期是否超出范围，如果超出了，则忽略这次选择
  if (selectedDate.year <= this.calendarValue.endMonth && selectedDate.month >= this.calendarValue.startMonth) {
    this.calendarValue.date = selectedDate;
  }
}