前言

日历组件用于选择日期或日期区间。
有两种风格，一种是弹出风格，一种是平铺风格。只需要将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

1. 引用

"usingComponents": {
  "van-calendar": "@vant/weapp/calendar/index"
}

2. 示例

<van-calendar 
  poppable="{{false}}" type="range" show-confirm="{{false}}" class="calendar"
  readonly
  formatter="{{ formatter }}"
  default-date="{{defaultDate}}"
  min-date="{{ minDate }}"
  max-date="{{ maxDate }}"
/>

// pages/record/index.js
Page({

  data: {
    minDate: 0,
    maxDate: 0,
    defaultDate: [0,0],
    readonly: true,

    formatter(day){
      if(day.type === 'start'){
        day.bottomInfo = '住店';
      }else if(day.type === 'end'){
        day.bottomInfo = '离开酒店';
      }
      return day;
    }
  },
})

image.png

3. 常用属性介绍

readonly={{true}} 是否只读
min-date="{{ minDate }}" 和 max-date="{{ maxDate }}" 接收一个时间戳，可以利用js的Date对象来进行转换指示日期组件可以显示的日期范围。通常日期组件可以上下滑动，显示多个月份。通过这个属性可以限定日期组件只能显示某几个月
type="range" 日期组件的类型
选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间
show-confirm="{{false}}" 是否显示确定按钮，如果为不显示，则一旦选择了日期就触发了confirm事件。
show-title="{{false}}" 是否显示标题

4. 指定日期组件的高度

在wxss文件添加如下

/* pages/record/index.wxss */
.calendar {
  --calendar-height: 500px;
}

5. 格式化日期显示

需要指定formatter

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />

Page({
  data: {
    formatter(day) {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();

      if (month === 5) {
        if (date === 1) {
          day.topInfo = '劳动节';
        } else if (date === 4) {
          day.topInfo = '五四青年节';
        } else if (date === 11) {
          day.text = '今天';
        }
      }

      if (day.type === 'start') {
        day.bottomInfo = '入住';
      } else if (day.type === 'end') {
        day.bottomInfo = '离店';
      }

      return day;
    },
  },
});