日期选择器,用于选择年、月、日,通常与弹出层组件配合使用。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from "vue";
import { DatePicker } from "vant";
const app = createApp();
app.use(DatePicker);
通过 v-model
绑定当前选中的日期,通过 min-date
和 max-date
属性来设定可选的时间范围。
<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
属性可以控制选项的类型,支持以任意顺序对 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
函数,可以对选项文字进行格式化处理。
<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
函数,可以对选项数组进行过滤,实现自定义选项间隔。
<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,
};
},
};
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前选中的日期 | string[] | []
|
columns-type | 选项类型,由 year 、month 和 day 组成的数组 |
string[] | ["year", "month", "day"]
|
min-date | 可选的最小时间,精确到日 | Date | 十年前 |
max-date | 可选的最大时间,精确到日 | Date | 十年后 |
title | 顶部栏标题 | string | ""
|
confirm-button-text | 确认按钮文字 | string | 确认
|
cancel-button-text | 取消按钮文字 | string | 取消
|
show-toolbar | 是否显示顶部栏 | boolean | true
|
loading | 是否显示加载状态 | boolean | false
|
readonly | 是否为只读状态,只读状态下无法切换选项 | boolean | false
|
filter | 选项过滤函数 | (type: string, options: PickerOption[]) => PickerOption[] | - |
formatter | 选项格式化函数 | (type: string, option: PickerOption) => PickerOption | - |
option-height | 选项高度,支持 px vw vh rem 单位,默认 px
|
number | string | 44
|
visible-option-num | 可见的选项个数 | number | string | 6
|
swipe-duration | 快速滑动时惯性滚动的时长,单位 ms
|
number | string | 1000
|
事件名 | 说明 | 回调参数 |
---|---|---|
confirm | 点击完成按钮时触发 | { selectedValues, selectedOptions } |
cancel | 点击取消按钮时触发 | { selectedValues, selectedOptions } |
change | 选项改变时触发 | { selectedValues, selectedOptions, columnIndex } |
名称 | 说明 | 参数 |
---|---|---|
toolbar | 自定义整个顶部栏的内容 | - |
title | 自定义标题内容 | - |
confirm | 自定义确认按钮内容 | - |
cancel | 自定义取消按钮内容 | - |
option | 自定义选项内容 | option: PickerOption |
columns-top | 自定义选项上方内容 | - |
columns-bottom | 自定义选项下方内容 | - |
组件导出以下类型定义:
import type { DatePickerProps, DatePickerColumnType } from "vant";
请注意不要在模板中直接使用类似 min-date="new Date()"
的写法,这样会导致每次渲染组件时传入一个新的 Date 对象,而传入新的数据会触发下一次渲染,从而陷入死循环。
正确的做法是将 min-date
作为一个数据定义在 data
函数或 setup
中。
如果你遇到了在 iOS 上无法渲染组件的问题,请确认在创建 Date 对象时没有使用 new Date("2020-01-01")
这样的写法,iOS 不支持以中划线分隔的日期格式,正确写法是 new Date("2020/01/01")
。
对此问题的详细解释:stackoverflow。
参见桌面端适配。
介绍在右上角展示徽标数字或小红点。引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } from ...
介绍用于标记关键词和概括主要内容。引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } from ...
介绍Vant 是基于有赞Zan Design System视觉规范实现的组件库,在这里可以下载 Vant 的设计资源。设计稿组件设计稿(Sketch)包含...
介绍日历组件用于选择日期或日期区间。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createA...
介绍用户可以在文本框内输入或编辑文字。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { creat...
介绍建立父子组件之间的关联关系,进行数据通信和方法调用,基于provide和inject实现。代码演示基本用法在父组件中使用useChildr...