您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Vant Calendar 日历

日历组件用于选择日期或日期区间,2.4 版本开始此组件

import Vue from 'vue';
import { Calendar } from 'vant';

Vue.use(Calendar);

下面演示了结合单元格来使用日历组件的,日期选择完成后会触发confirm事件

<van-cell title="选择单个日期" :value="date" @click="show = true" />
<van-calendar v-model="show" @confirm="onConfirm" />
export default {
  data() {
    return {
      date: '',
      show: false
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    }
  }
};

设置type为range后可以选择日期区间,此时confirm事件返回的 date 为数组结构,数组第一项为开始时间,第二项为结束时间。

<van-cell title="选择日期区间" :value="date" @click="show = true" />
<van-calendar v-model="show" type="range" @confirm="onConfirm" />
export default {
  data() {
    return {
      date: '',
      show: false
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    }
  }
};

将show-confirm设置为false可以隐藏确认按钮,这种情况下选择完成后会立即触发confirm事件

<van-calendar v-model="show" :show-confirm="false" />

通过color可以日历的颜色,对选中日期和按钮生效

<van-calendar v-model="show" color="#07c160" />

通过min-date和max-date定义日历的范围

<van-calendar
  v-model="show"
  :min-date="minDate"
  :max-date="maxDate"/>
export default {
  data() {
    return {
      show: false,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2010, 0, 31)
    };
  }
};

通过confirm-text设置按钮,通过confirm-disabled-text设置按钮禁用时的

<van-calendar
  v-model="show"
  type="range"
  confirm-text="完成"
  confirm-disabled-text="请选择结束时间"
/>

通过传入formatter来对日历上每一格的进行格式化

<van-calendar
  v-model="show"
  type="range"
  :formatter="formatter"
/>
export default {
  methods: {
    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;
    }
  }
}

通过position弹出层的弹出位置,可选值为top、left、right

<van-calendar
  v-model="show"
  :round="false"
  position="right"
/>

选择日期区间时,可以通过max-range来指定最多可选天数,选择的范围超过最多可选天数时,会弹出相应的文案

<van-calendar
  type="range"
  :max-range="3"
  :style="{ height: '500px' }"
/>

将poppable设置为false,日历会直接展示在内,而不是以弹层的形式出现

<van-calendar
  title="日历"
  :poppable="false"
  :show-confirm="false"
  :style="{ height: '500px' }"
/>

API

日历中的每个日期都对应 Day 对象,通过formatter可以 Day 对象的

通过 ref 可以到 Calendar 实例并实例,详见 

常见问题

如果你遇到了在 iOS 上无法渲染组件的问题,请确认在创建 Date 对象时没有使用new Date('2020-01-01')这样的写法,iOS 以中划线分隔的日期格式,正确写法是new Date('2020/01/01')。

对此问题的详细解释:。

演示


联系我
置顶