DatePicker 日期选择器
规则
基础示例
Props 配置示例
年月日选择
年月选择
年选择
月日选择
限制日期范围
禁用与只读对比
Events 事件示例
监听日期变化
完整配置项:Vant_DatePicker
value: String
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 是否禁用 | boolean | false |
| 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 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| confirm | 点击完成按钮时触发 | { selectedValues, selectedOptions, selectedIndexes } |
| cancel | 点击取消按钮时触发 | { selectedValues, selectedOptions, selectedIndexes } |
| change | 选项改变时触发 | { selectedValues, selectedOptions, selectedIndexes, columnIndex } |


