react bee-timepicker component for tinper-bee
可定制的时间组件
先进行下载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"| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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