DatetimePicker 时间选择

时间选择组件通常与 弹出层 组件配合使用

使用指南

  1. import { DatetimePicker } from 'vant';
  2. Vue.use(DatetimePicker);

代码演示

选择完整时间

  1. <van-datetime-picker
  2. v-model="currentDate"
  3. type="datetime"
  4. :min-date="minDate"
  5. :max-date="maxDate"
  6. />
  1. export default {
  2. data() {
  3. return {
  4. minHour: 10,
  5. maxHour: 20,
  6. minDate: new Date(),
  7. maxDate: new Date(2019, 10, 1),
  8. currentDate: new Date()
  9. };
  10. }
  11. };

选择日期(年月日)

  1. <van-datetime-picker
  2. v-model="currentDate"
  3. type="date"
  4. :min-date="minDate"
  5. />
  1. export default {
  2. data() {
  3. return {
  4. currentDate: new Date()
  5. };
  6. }
  7. }

选择日期(年月)

通过传入 formatter 函数对选项文字进行处理

  1. <van-datetime-picker
  2. v-model="currentDate"
  3. type="year-month"
  4. :min-date="minDate"
  5. :formatter="formatter"
  6. />
  1. export default {
  2. data() {
  3. return {
  4. currentDate: new Date()
  5. };
  6. },
  7. methods: {
  8. formatter(type, value) {
  9. if (type === 'year') {
  10. return `${value}年`;
  11. } else if (type === 'month') {
  12. return `${value}月`
  13. }
  14. return value;
  15. }
  16. }
  17. }

选择时间

  1. <van-datetime-picker
  2. v-model="currentDate"
  3. type="time"
  4. :min-hour="minHour"
  5. :max-hour="maxHour"
  6. />
  1. export default {
  2. data() {
  3. return {
  4. currentDate: '12:00'
  5. };
  6. }
  7. }

API

参数说明类型默认值版本
type类型,可选值为 date time year-monthStringdatetime1.0.2
min-date可选的最小时间,精确到分钟Date十年前-
max-date可选的最大时间,精确到分钟Date十年后-
min-hour可选的最小小时,针对 time 类型Number0-
max-hour可选的最大小时,针对 time 类型Number23-
min-minute可选的最小分钟,针对 time 类型Number01.1.15
max-minute可选的最大分钟,针对 time 类型Number591.1.15
formatter选项格式化函数(type, value) => value-1.1.14
title顶部栏标题String''1.0.4
show-toolbar是否显示顶部栏Booleanfalse1.0.2
loading是否显示加载状态Booleanfalse1.0.4
item-height选项高度Number441.0.4
confirm-button-text确认按钮文字String确认1.0.4
cancel-button-text取消按钮文字String取消1.0.4
visible-item-count可见的选项个数Number51.0.4

Event

事件名称说明回调参数
change当值变化时触发的事件picker 实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change事件

change事件中,可以获取到picker实例,对picker进行相应的更新等操作:

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值,返回一个数组
setValues(values)values为一个数组,设置所有列中被选中的值

原文: https://youzan.github.io/vant/#/zh-CN/datetime-picker