時間選擇器,支持日期、年月、時分等維度,通常與彈出層組件配合使用。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { DatetimePicker } from 'vant';
const app = createApp();
app.use(DatetimePicker);
DatetimePicker 通過 type 屬性來定義需要選擇的時間類型,type 為 date 表示選擇年月日。通過 min-date 和 max-date 屬性可以確定可選的時間范圍。
<van-datetime-picker
v-model="currentDate"
type="date"
title="選擇年月日"
:min-date="minDate"
:max-date="maxDate"
/>
import { ref } from 'vue';
export default {
setup() {
const currentDate = ref(new Date(2021, 0, 17));
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate,
};
},
};
將 type 設(shè)置為 year-month 即可選擇年份和月份。通過傳入 formatter 函數(shù),可以對選項文字進行格式化處理。
<van-datetime-picker
v-model="currentDate"
type="year-month"
title="選擇年月"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
import { ref } from 'vue';
export default {
setup() {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'year') {
return `${val}年`;
}
if (type === 'month') {
return `${val}月`;
}
return val;
};
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
currentDate,
};
},
};
將 type 設(shè)置為 month-day 即可選擇月份和日期。
<van-datetime-picker
v-model="currentDate"
type="month-day"
title="選擇月日"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
import { ref } from 'vue';
export default {
setup() {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'month') {
return `${val}月`;
}
if (type === 'day') {
return `${val}日`;
}
return val;
};
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
currentDate,
};
},
};
將 type 設(shè)置為 time 即可選擇時間(小時和分鐘)。
<van-datetime-picker
v-model="currentTime"
type="time"
title="選擇時間"
:min-hour="10"
:max-hour="20"
/>
import { ref } from 'vue';
export default {
setup() {
const currentTime = ref('12:00');
return { currentTime };
},
};
將 type 設(shè)置為 datetime 即可選擇完整時間,包括年月日和小時、分鐘。
<van-datetime-picker
v-model="currentDate"
type="datetime"
title="選擇完整時間"
:min-date="minDate"
:max-date="maxDate"
/>
import { ref } from 'vue';
export default {
setup() {
const currentDate = ref(new Date());
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate,
};
},
};
將 type 設(shè)置為 datehour 即可選擇日期和小時,包括年月日和小時。
<van-datetime-picker
v-model="currentDate"
type="datehour"
title="選擇年月日小時"
:min-date="minDate"
:max-date="maxDate"
/>
import { ref } from 'vue';
export default {
setup() {
const currentDate = ref(new Date());
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate,
};
},
};
通過傳入 filter 函數(shù),可以對選項數(shù)組進行過濾,實現(xiàn)自定義時間間隔。
<van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
import { ref } from 'vue';
export default {
setup() {
const currentTime = ref('12:00');
const filter = (type, options) => {
if (type === 'minute') {
return options.filter((option) => Number(option) % 5 === 0);
}
return options;
};
return {
filter,
currentTime,
};
},
};
<van-datetime-picker
v-model="currentDate"
type="date"
title="自定義列排序"
:columns-order="['month', 'day', 'year']"
:formatter="formatter"
/>
import { ref } from 'vue';
export default {
setup() {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'year') {
return val + '年';
}
if (type === 'month') {
return val + '月';
}
if (type === 'day') {
return val + '日';
}
return val;
};
return {
formatter,
currentDate,
};
},
};
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
type | 時間類型,可選值為 date time
year-month month-day datehour
|
string | datetime
|
title | 頂部欄標題 | string | ''
|
confirm-button-text | 確認按鈕文字 | string | 確認
|
cancel-button-text | 取消按鈕文字 | string | 取消
|
show-toolbar | 是否顯示頂部欄 | boolean | true
|
loading | 是否顯示加載狀態(tài) | boolean | false
|
readonly | 是否為只讀狀態(tài),只讀狀態(tài)下無法切換選項 | boolean | false
|
filter | 選項過濾函數(shù) | (type: string, values: string[]) => string[] | - |
formatter | 選項格式化函數(shù) | (type: string, value: string) => string | - |
columns-order | 自定義列排序數(shù)組, 子項可選值為
year 、month 、day 、hour 、minute
|
string[] | - |
item-height | 選項高度,支持 px vw vh rem 單位,默認 px
|
number | string | 44
|
visible-item-count | 可見的選項個數(shù) | number | string | 6
|
swipe-duration | 快速滑動時慣性滾動的時長,單位ms
|
number | string | 1000
|
當時間選擇器類型為 date 或 datetime 時,支持以下 props:
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
min-date | 可選的最小時間,精確到分鐘 | Date | 十年前 |
max-date | 可選的最大時間,精確到分鐘 | Date | 十年后 |
當時間選擇器類型為 time 時,支持以下 props:
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
min-hour | 可選的最小小時 | number | string | 0
|
max-hour | 可選的最大小時 | number | string | 23
|
min-minute | 可選的最小分鐘 | number | string | 0
|
max-minute | 可選的最大分鐘 | number | string | 59
|
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 當值變化時觸發(fā)的事件 | value: 當前選中的時間 |
confirm | 點擊完成按鈕時觸發(fā)的事件 | value: 當前選中的時間 |
cancel | 點擊取消按鈕時觸發(fā)的事件 | - |
名稱 | 說明 | 參數(shù) |
---|---|---|
default | 自定義整個頂部欄的內(nèi)容 | - |
title | 自定義標題內(nèi)容 | - |
confirm | 自定義確認按鈕內(nèi)容 | - |
cancel | 自定義取消按鈕內(nèi)容 | - |
option | 自定義選項內(nèi)容 | option: string | object |
columns-top | 自定義選項上方內(nèi)容 | - |
columns-bottom | 自定義選項下方內(nèi)容 | - |
通過 ref 可以獲取到 DatetimePicker 實例并調(diào)用實例方法,詳見組件實例方法。
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
getPicker | 獲取 Picker 實例,用于調(diào)用 Picker 的實例方法 | - | - |
請注意不要在模板中直接使用類似min-date="new Date()"的寫法,這樣會導致每次渲染組件時傳入一個新的 Date 對象,而傳入新的數(shù)據(jù)會觸發(fā)下一次渲染,從而陷入死循環(huán)。
正確的做法是將min-date作為一個數(shù)據(jù)定義在data函數(shù)中。
如果你遇到了在 iOS 上無法渲染組件的問題,請確認在創(chuàng)建 Date 對象時沒有使用new Date('2020-01-01')這樣的寫法,iOS 不支持以中劃線分隔的日期格式,正確寫法是new Date('2020/01/01')。
對此問題的詳細解釋:stackoverflow。
參見桌面端適配。
如果僅需要選擇年份或者月份,建議直接使用 Picker 組件。
更多建議: