介紹

日歷組件用于選擇日期或日期區(qū)間，2.4 版本開始支持此組件

引入

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

Vue.use(Calendar);

代碼演示

選擇單個(gè)日期

下面演示了結(jié)合單元格來使用日歷組件的用法，日期選擇完成后會(huì)觸發(fā)confirm事件

<van-cell title="選擇單個(gè)日期" :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);
    }
  }
};

選擇日期區(qū)間

設(shè)置type為range后可以選擇日期區(qū)間，此時(shí)confirm事件返回的 date 為數(shù)組結(jié)構(gòu)，數(shù)組第一項(xiàng)為開始時(shí)間，第二項(xiàng)為結(jié)束時(shí)間。

<van-cell title="選擇日期區(qū)間" :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設(shè)置為false可以隱藏確認(rèn)按鈕，這種情況下選擇完成后會(huì)立即觸發(fā)confirm事件

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

自定義顏色

通過color屬性可以自定義日歷的顏色，對(duì)選中日期和底部按鈕生效

<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設(shè)置按鈕文字，通過confirm-disabled-text設(shè)置按鈕禁用時(shí)的文字

<van-calendar
  v-model="show"
  type="range"
  confirm-text="完成"
  confirm-disabled-text="請(qǐng)選擇結(jié)束時(shí)間"
/>

自定義日期文案

通過傳入formatter函數(shù)來對(duì)日歷上每一格的內(nèi)容進(jìn)行格式化

<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 = '勞動(dòng)節(jié)';
        } else if (date === 4) {
          day.topInfo = '五四青年節(jié)';
        } 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"
/>

日期區(qū)間最大范圍

選擇日期區(qū)間時(shí)，可以通過max-range屬性來指定最多可選天數(shù)，選擇的范圍超過最多可選天數(shù)時(shí)，會(huì)彈出相應(yīng)的提示文案

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

平鋪展示

將poppable設(shè)置為false，日歷會(huì)直接展示在頁面內(nèi)，而不是以彈層的形式出現(xiàn)

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

API

Props

Day 數(shù)據(jù)結(jié)構(gòu)

日歷中的每個(gè)日期都對(duì)應(yīng)一個(gè) Day 對(duì)象，通過formatter屬性可以自定義 Day 對(duì)象的內(nèi)容

Events

Slots

方法

通過 ref 可以獲取到 Calendar 實(shí)例并調(diào)用實(shí)例方法，詳見 組件實(shí)例方法

常見問題

在 iOS 系統(tǒng)上初始化組件失??？

如果你遇到了在 iOS 上無法渲染組件的問題，請(qǐng)確認(rèn)在創(chuàng)建 Date 對(duì)象時(shí)沒有使用new Date('2020-01-01')這樣的寫法，iOS 不支持以中劃線分隔的日期格式，正確寫法是new Date('2020/01/01')。

對(duì)此問題的詳細(xì)解釋：stackoverflow。