uniapp中uview组件库的DatetimePicker 选择器的用法

目录

基本使用

#年 月 日

#格式化

#限制最大最小值

API

#Props

#Events

#Methods


基本使用

  • 通过show绑定一个布尔值变量,用于控制组件的弹出与收起。
  • 通过mode配置选择何种日期格式。



#年 月 日

此模式通过mode设置为date




#格式化

如有需要,可以通过formatter参数编写自定义格式化规则。

注意:

微信小程序不支持通过props传递函数参数,所以组件内部暴露了一个setFormatter方法用于设置格式化方法,注意在页面的onReady生命周期获取ref再操作。




#限制最大最小值

参数minDatemaxDate可以设置最大值和最小值(传入时间戳)。



API

#Props

参数 说明 类型 默认值 可选值
show 用于控制选择器的弹出与收起 Boolean false true
showToolbar 是否显示顶部的操作栏 Boolean true false
v-model 绑定值 String | Number - -
title 顶部标题 String - -
mode 展示格式 String datetime date为日期选择,time为时间选择,year-month为年月选择
maxDate 可选的最大时间(时间戳毫秒) Number 最大默认值为后10年 -
minDate 可选的最小时间(时间戳毫秒) Number 最小默认值为前10年 -
minHour 可选的最小小时,仅mode=time有效 Number 0 -
maxHour 可选的最大小时,仅mode=time有效 Number 23 -
minMinute 可选的最小分钟,仅mode=time有效 Number 0 -
maxMinute 可选的最大分钟,仅mode=time有效 Number 59 -
filter 选项过滤函数 Function null -
formatter 输入过滤或格式化函数(如需兼容微信小程序,则只能通过setFormatter方法) Function null -
loading 是否显示加载中状态 Boolean false true
itemHeight 各列中,单个选项的高度 String | Number 44 -
cancelText 取消按钮的文字 String 取消 -
confirmText 确认按钮的文字 String 确认 -
cancelColor 取消按钮的颜色 String #909193 -
confirmColor 确认按钮的颜色 String #3c9cff -
visibleItemCount 每列中可见选项的数量 String | Number 5 -
closeOnClickOverlay 是否允许点击遮罩关闭选择器(注意:关闭事件需要自行处理,只会在开启closeOnClickOverlay后点击遮罩层执行close回调) Boolean false true
defaultIndex 各列的默认索引 Array [] -

#Events

事件名 说明 回调参数 版本
close 关闭选择器时触发 - -
confirm 点击确定按钮时触发 value:返回所选时间戳,mode:当前模式 -
change 当选择值变化时触发 value:返回所选时间戳,mode:当前模式 -
cancel 点击取消按钮 - -

#Methods

方法名 说明
setFormatter 为兼容微信小程序而暴露的内部方法,见上方说明

你可能感兴趣的:(uniapp,uni-app)