jk's notes
  • DatePicker 日期选择

DatePicker 日期选择

文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/date-picker

组件为 DatePicker, 常常与 Popup 一起使用.

常用属性:

  • v-modal 数据绑定用. 数据形为: ['year', 'month', 'day'], 是 string[] 类型.
  • min-date 和 max-date 作为日期范围. 使用 Date 数据类型.
  • title 标题
  • 选项类型 columns-type, 任意组合 年月日的选择方式, 取值类型为 ('year'|'month'|'day')[]
  • 格式选项: formatter 函数. 为每一个选项调用, 利用该函数可以自定义显示的内容.
  • 过滤选项: filter 函数. 每一个选项也会调用该函数, 返回 true 才会在页面中显示.

常用事件:

  • confirm 点击确认时触发
  • cancel 点击取消时触发

使用语法:

<van-date-picker v-model="..."></van-date-picker>

注意在 iOS 设备上, 不支持 new Date('2020-1-1') 的写法, 应使用 new Date(2020/1/1) 的形式.

如果不使用弹框, 直接在页面中使用, 效果如下:

image-20240111161822793

应该结合 Popup 使用

Last Updated:
Contributors: jk