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

快捷選擇

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

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

自定義顏色

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

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

自定義日期范圍

通過 ?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)容進(jìn)行格式化。

<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)用實例方法，詳見組件實例方法。

類型定義

組件導(dǎo)出以下類型定義：

import type {
  CalendarType,
  CalendarProps,
  CalendarDayItem,
  CalendarDayType,
  CalendarInstance,
} from 'vant';

?CalendarInstance? 是組件實例的類型，用法如下：

import { ref } from 'vue';
import type { CalendarInstance } from 'vant';

const calendarRef = ref<CalendarInstance>();

calendarRef.value?.reset();

主題定制

樣式變量

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

常見問題

如何在 formatter 中使用異步返回的數(shù)據(jù)？

如果需要在 formatter 中使用異步返回的數(shù)據(jù)，可以使用計算屬性動態(tài)創(chuàng)建 formatter 函數(shù)，示例如下：

const asyncData = ref();

const formatter = computed(() => {
  if (!asyncData.value) {
    return (day) => day;
  }
  return (day) => {
    day.bottomInfo = asyncData.value;
    return day;
  };
});

setTimeout(() => {
  asyncData.value = '后端文案';
}, 3000);

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

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

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