bee-timepicker

react bee-timepicker component for tinper-bee

可定制的时间组件

使用

使用单独的timepicker包

组件引入

先进行下载bee-timepicker包

npm install --save bee-timepicker

组件调用

import Timepicker from 'bee-timepicker';
ReactDOM.render(
        <TimePicker></TimePicker>
        , document.getElementById('target'));

样式引入

• 可以使用link引入build目录下TimePicker.css

<link rel="stylesheet" href="./node_modules/bee-timepicker/build/Timepicker.css">

• 可以在js中import样式

import "./node_modules/bee-timepicker/src/Timepicker.scss"
//或是
import "./node_modules/bee-timepicker/build/Timepicker.css"

API

参数	说明	类型	默认值
prefixCls	prefixCls of this component	String	'rc-time-picker'
clearText	clear tooltip of icon	String	'clear'
disabled	禁用时间组件	Boolean	false
allowEmpty	允许为空	Boolean	true
open	current open state of picker. controlled prop	Boolean	false
defaultValue	默认值	moment	null
defaultOpenValue	默认打开的值	moment	moment()
value	当前值	moment	null
placeholder	输入框的placeholder	String	''
className	time picker className	String	''
popupClassName	弹出面板的ClassName	String	''
showHour	显示小时	Boolean	true
showMinute	显示分钟	Boolean	true
showSecond	显示秒	Boolean	true
format	格式化	String	-
disabledHours	禁用的小时	Function	-
disabledMinutes	禁用的分钟	Function	-
disabledSeconds	禁用的秒	Function	-
use12Hours	切换12小时制	Boolean	false
hideDisabledOptions	是否隐藏禁用选项	Boolean	false
onChange	改变时的回调行数	Function	null
addon	从时间选择面板称为渲染一些插件在它的底部，像一个OK按钮。接收板实例作为参数	Function	-
placement	one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']	String	bottomLeft
transitionName	-	String	''
name	设置input的name属性	String	-
onOpen	打开时的回调	Function({ open })	-
onClose	关闭时的回调	Function({ open })	-

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-timepicker
$ cd bee-timepicker
$ npm install
$ npm run dev