Vant4 DatePicker 日期選擇

介紹

日期選擇器，用于選擇年、月、日，通常與彈出層組件配合使用。

引入

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

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

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

代碼演示

基礎(chǔ)用法

通過 ?v-model? 綁定當前選中的日期，通過 ?min-date? 和 ?max-date? 屬性來設(shè)定可選的時間范圍。

<van-date-picker
  v-model="currentDate"
  title="選擇日期"
  :min-date="minDate"
  :max-date="maxDate"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentDate = ref(['2021', '01', '01']);
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
    };
  },
};

選項類型

通過 ?columns-type? 屬性可以控制選項的類型，支持以任意順序?qū)?nbsp;?year?、?month? 和 ?day? 進行排列組合。

比如：

• 傳入 ?['year']? 來單獨選擇年份。
• 傳入 ?['month']? 來單獨選擇月份。
• 傳入 ?['year', 'month']? 來選擇年份和月份。
• 傳入 ?['month', 'day']? 來選擇月份和日期。

<van-date-picker
  v-model="currentDate"
  title="選擇年月"
  :min-date="minDate"
  :max-date="maxDate"
  :columns-type="columnsType"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentDate = ref(['2021', '01']);
    const columnsType = ['year', 'month'];
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
      columnsType,
    };
  },
};

格式化選項

通過傳入 ?formatter? 函數(shù)，可以對選項文字進行格式化處理。

<van-date-picker
  v-model="currentDate"
  title="選擇年月"
  :min-date="minDate"
  :max-date="maxDate"
  :formatter="formatter"
  :columns-type="columnsType"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentDate = ref(['2021', '01']);
    const columnsType = ['year', 'month'];

    const formatter = (type, option) => {
      if (type === 'year') {
        option.text += '年';
      }
      if (type === 'month') {
        option.text += '月';
      }
      return option;
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      formatter,
      currentDate,
      columnsType,
    };
  },
};

過濾選項

通過傳入 ?filter? 函數(shù)，可以對選項數(shù)組進行過濾，實現(xiàn)自定義選項間隔。

<van-date-picker
  v-model="currentDate"
  title="選擇年月"
  :filter="filter"
  :min-date="minDate"
  :max-date="maxDate"
  :columns-type="columnsType"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentDate = ref(['2021', '01']);
    const columnsType = ['year', 'month'];
    const filter = (type, options) => {
      if (type === 'month') {
        return options.filter((option) => Number(option.value) % 6 === 0);
      }
      return options;
    };

    return {
      filter,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentTime,
      columnsType,
    };
  },
};

API

Props

Events

Slots

類型定義

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

import type { DatePickerProps, DatePickerColumnType } from 'vant';

常見問題

設(shè)置 min-date 或 max-date 后出現(xiàn)頁面卡死的情況？

請注意不要在模板中直接使用類似 ?min-date="new Date()"? 的寫法，這樣會導(dǎo)致每次渲染組件時傳入一個新的 Date 對象，而傳入新的數(shù)據(jù)會觸發(fā)下一次渲染，從而陷入死循環(huán)。

正確的做法是將 ?min-date? 作為一個數(shù)據(jù)定義在 ?data? 函數(shù)或 ?setup? 中。

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

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

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

在桌面端無法操作組件？

參見桌面端適配。