Vant3 Calendar日歷

介紹

日歷組件用于選擇日期或日期區(qū)間。

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

const app = createApp();
app.use(Calendar);

代碼演示

選擇單個日期

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

<van-cell title="選擇單個日期" :value="date" @click="show = true" />
<van-calendar v-model:show="show" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
  setup() {
    const date = ref('');
    const show = ref(false);

    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };

    return {
      date,
      show,
      onConfirm,
    };
  },
};

選擇多個日期

設(shè)置 type 為 multiple 后可以選擇多個日期，此時 confirm 事件返回的 date 為數(shù)組結(jié)構(gòu)，數(shù)組包含若干個選中的日期。

<van-cell title="選擇多個日期" :value="text" @click="show = true" />
<van-calendar v-model:show="show" type="multiple" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
  setup() {
    const text = ref('');
    const show = ref(false);

    const onConfirm = (dates) => {
      show.value = false;
      text.value = `選擇了 ${dates.length} 個日期`;
    };

    return {
      text,
      show,
      onConfirm,
    };
  },
};

選擇日期區(qū)間

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

<van-cell title="選擇日期區(qū)間" :value="date" @click="show = true" />
<van-calendar v-model:show="show" type="range" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
  setup() {
    const date = ref('');
    const show = ref(false);

    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (values) => {
      const [start, end] = values;
      show.value = false;
      date.value = `${formatDate(start)} - ${formatDate(end)}`;
    };

    return {
      date,
      show,
      onConfirm,
    };
  },
};

Tips: 默認情況下，日期區(qū)間的起止時間不能為同一天，可以通過設(shè)置 allow-same-day 屬性來允許選擇同一天。

快捷選擇

將 show-confirm 設(shè)置為 false 可以隱藏確認按鈕，這種情況下選擇完成后會立即觸發(fā) confirm 事件。

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

自定義顏色

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

<van-calendar v-model:show="show" color="#1989fa" />

自定義日期范圍

通過 min-date 和 max-date 定義日歷的范圍。

<van-calendar v-model:show="show" :min-date="minDate" :max-date="maxDate" />

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);

    return {
      show,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2010, 0, 31),
    };
  },
};

自定義按鈕文字

通過 confirm-text 設(shè)置按鈕文字，通過 confirm-disabled-text 設(shè)置按鈕禁用時的文字。

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

自定義日期文案

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

<van-calendar v-model:show="show" type="range" :formatter="formatter" />

export default {
  setup() {
    const formatter = (day) => {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();

      if (month === 5) {
        if (date === 1) {
          day.topInfo = '勞動節(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;
    };

    return {
      formatter,
    };
  },
};

自定義彈出位置

通過 position 屬性自定義彈出層的彈出位置，可選值為 top、left、right。

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

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

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

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

自定義周起始日

通過 first-day-of-week 屬性設(shè)置一周從哪天開始。

<van-calendar first-day-of-week="1" />

平鋪展示

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

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

API

Props

Calendar Poppable Props

當(dāng) Calendar 的 poppable 為 true 時，支持以下 props:

Calendar Range Props

當(dāng) Calendar 的 type 為 range 時，支持以下 props:

Calendar Multiple Props

當(dāng) Calendar 的 type 為 multiple 時，支持以下 props:

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

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

Events

Slots

方法

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

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。

常見問題

在 iOS 系統(tǒng)上初始化組件失?。?/h2>

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

對此問題的詳細解釋：stackoverflow。