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. exportdefault{
  2. data(){
  3. return{
  4. minHour:10,
  5. maxHour:20,
  6. minDate:newDate(),
  7. maxDate:newDate(2019,10,1),
  8. currentDate:newDate()
  9. };
  10. }
  11. };

选择日期(年月日)

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

选择时间

  1. <van-datetime-picker
  2. v-model="currentTime"
  3. type="time"
  4. :min-hour="10"
  5. :max-hour="20"
  6. />
  1. exportdefault{
  2. data(){
  3. return{
  4. currentTime:'12:00'
  5. };
  6. }
  7. }

选项过滤器

通过传入filter函数,可以对选项数组进行过滤,实现自定义时间间隔

  1. <van-datetime-picker
  2. v-model="currentTime"
  3. type="time"
  4. :filter="filter"
  5. />
  1. exportdefault{
  2. data(){
  3. return{
  4. currentTime:'12:00'
  5. };
  6. },
  7. methods:{
  8. filter(type, options){
  9. if(type ==='minute'){
  10. return options.filter(option => option %5===0)
  11. }
  12. return options;
  13. }
  14. }
  15. }

API

Props

参数说明类型默认值版本
type类型,可选值为 datetimeyear-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
filter选项过滤函数(type, values) => values-2.0.0
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

Events

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

change 事件

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

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

DatetimePicker 时间选择 - 图1