@aaxis/rc-picker 中文文档教程
rc-picker
Live Demo
https://react -component.github.io/picker/
Install
Usage
import Picker from 'rc-picker';
import 'rc-picker/assets/index.css';
import { render } from 'react-dom';
render(<Picker />, mountNode);
API
Picker
Property | Type | Default | Description |
---|---|---|---|
prefixCls | String | rc-picker | prefixCls of this component |
className | String | '' | additional css class of root dom node |
style | React.CSSProperties | additional style of root dom node | |
dropdownClassName | String | '' | additional className applied to dropdown |
dropdownAlign | Object:alignConfig of dom-align | value will be merged into placement's dropdownAlign config | |
popupStyle | React.CSSProperties | customize popup style | |
transitionName | String | '' | css class for animation |
locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale |
inputReadOnly | Boolean | false | set input to read only |
allowClear | Boolean | false | whether show clear button |
autoFocus | Boolean | false | whether auto focus |
showTime | Boolean | Object | showTime options | to provide an additional time selection |
picker | time | date | week | month | year | control which kind of panel should be shown | |
format | String | String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display |
use12Hours | Boolean | false | 12 hours display mode |
value | moment | current value like input's value | |
defaultValue | moment | defaultValue like input's defaultValue | |
open | Boolean | false | current open state of picker. controlled prop |
suffixIcon | ReactNode | The custom suffix icon | |
clearIcon | ReactNode | The custom clear icon | |
prevIcon | ReactNode | The custom prev icon | |
nextIcon | ReactNode | The custom next icon | |
superPrevIcon | ReactNode | The custom super prev icon | |
superNextIcon | ReactNode | The custom super next icon | |
disabled | Boolean | false | whether the picker is disabled |
placeholder | String | picker input's placeholder | |
getPopupContainer | function(trigger) | to set the container of the floating layer, while the default is to create a div element in body | |
onChange | Function(date: moment, dateString: string) | a callback function, can be executed when the selected time is changing | |
onOpenChange | Function(open:boolean) | called when open/close picker | |
onFocus | (event:React.FocusEvent | called like input's on focus | |
onBlur | (event:React.FocusEvent | called like input's on blur | |
onKeyDown | (event:React.KeyboardEvent | input on keydown event | |
direction | String: ltr or rtl | Layout direction of picker component, it supports RTL direction too. |
PickerPanel
Property | Type | Default | Description |
---|---|---|---|
prefixCls | String | rc-picker | prefixCls of this component |
className | String | '' | additional css class of root dom |
style | React.CSSProperties | additional style of root dom node | |
locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale |
value | moment | current value like input's value | |
defaultValue | moment | defaultValue like input's defaultValue | |
defaultPickerValue | moment | Set default display picker view date | |
mode | time | datetime | date | week | month | year | decade | control which kind of panel | |
picker | time | date | week | month | year | control which kind of panel | |
tabIndex | Number | 0 | view tabIndex |
showTime | Boolean | Object | showTime options | to provide an additional time selection |
showToday | Boolean | false | whether to show today button |
disabledDate | Function(date:moment) => Boolean | whether to disable select of current date | |
dateRender | Function(currentDate:moment, today:moment) => React.Node | custom rendering function for date cells | |
monthCellRender | Function(currentDate:moment, locale:Locale) => React.Node | Custom month cell render method | |
renderExtraFooter | (mode) => React.Node | extra footer | |
onSelect | Function(date: moment) | a callback function, can be executed when the selected time | |
onPanelChange | Function(value: moment, mode) | callback when picker panel mode is changed | |
onMouseDown | (event:React.MouseEvent | callback when executed onMouseDown evnent | |
direction | String: ltr or rtl | Layout direction of picker component, it supports RTL direction too. |
RangePicker
| 物业 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | --- | | 前缀Cls | 字符串 | rc-选择器 | 该组件的 prefixCls | | 类名 | 字符串 | '' | 根 dom 的附加 css 类 | | 风格 | React.CSS 属性 | | 根 dom 节点的附加样式 | | 语言环境 | 对象 | 从 'rc-picker/lib/locale/en_US' 导入 | rc-picker 语言环境 | | 价值 | 时刻| | 当前值类似于输入值 | | 默认值 | 时刻 | | defaultValue 类似于输入的 defaultValue | | 默认选择器值 | 时刻 | | 设置默认显示选择器查看日期 | | 分隔符 | 字符串 | '~' | 在输入之间设置分隔符 | | 选择器 | 时间 | 日期 | 星期 | 月 | 年份 | | 控制哪种面板| | 占位符 | [字符串,字符串] | | 日期输入的占位符 | | 演出时间 | 布尔值 | 对象 | showTime 选项 | 提供额外的时间选择 | | 显示时间。默认值 | [瞬间,瞬间] | | 设置所选日期的默认时间 | | 使用12小时 | 布尔值 | 假 | 12小时显示模式 | | 禁用时间 | 函数(日期:时刻,类型:'开始'|'结束'):对象| | | 指定不能选择的时间| | 范围 | { 字符串 | [范围:字符串]:时刻[]} | { [范围:字符串]:()=> 时刻[] } | | 用于快速选择的预设范围 | | 格式 | 字符串 | 字符串[] | 取决于您是否设置 timePicker 和您的语言环境 | 用于格式化/解析输入的日期(无时间)值。 当提供数组时,所有值都用于解析,第一个值用于显示 | | 允许空 | [布尔值,布尔值] | | 允许范围选择器清除文本 | | 可选 | [布尔值,布尔值] | | 是否选择picker | | 禁用 | 布尔值 | 假 | 范围选择器是否被禁用 | | 改变 | 函数(值:[时刻],格式字符串:[字符串,字符串])| | 一个回调函数,可以在选择的时间改变时执行 | | onCalendarChange | 函数(值:[时刻],格式字符串:[字符串,字符串],信息:{范围:'开始'|'结束'})| | 一个回调函数,可以在范围的开始时间或结束时间发生变化时执行 | | 方向 | 字符串:ltr 或 rtl | | picker组件的布局方向,也支持RTL方向。 | | 订单 | 布尔值 | 真 | (仅限 TimeRangePicker)false
禁用自动排序 |
showTime-options
Property | Type | Default | Description |
---|---|---|---|
format | String | moment format | |
showHour | Boolean | true | whether show hour |
showMinute | Boolean | true | whether show minute |
showSecond | Boolean | true | whether show second |
use12Hours | Boolean | false | 12 hours display mode |
hourStep | Number | 1 | interval between hours in picker |
minuteStep | Number | 1 | interval between minutes in picker |
secondStep | Number | 1 | interval between seconds in picker |
hideDisabledOptions | Boolean | false | whether hide disabled options |
defaultValue | moment | null | default initial value |
Development
npm install
npm start
License
rc-picker 在 MIT 许可证下发布。
rc-picker
Live Demo
https://react-component.github.io/picker/
Install
Usage
import Picker from 'rc-picker';
import 'rc-picker/assets/index.css';
import { render } from 'react-dom';
render(<Picker />, mountNode);
API
Picker
Property | Type | Default | Description |
---|---|---|---|
prefixCls | String | rc-picker | prefixCls of this component |
className | String | '' | additional css class of root dom node |
style | React.CSSProperties | additional style of root dom node | |
dropdownClassName | String | '' | additional className applied to dropdown |
dropdownAlign | Object:alignConfig of dom-align | value will be merged into placement's dropdownAlign config | |
popupStyle | React.CSSProperties | customize popup style | |
transitionName | String | '' | css class for animation |
locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale |
inputReadOnly | Boolean | false | set input to read only |
allowClear | Boolean | false | whether show clear button |
autoFocus | Boolean | false | whether auto focus |
showTime | Boolean | Object | showTime options | to provide an additional time selection |
picker | time | date | week | month | year | control which kind of panel should be shown | |
format | String | String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display |
use12Hours | Boolean | false | 12 hours display mode |
value | moment | current value like input's value | |
defaultValue | moment | defaultValue like input's defaultValue | |
open | Boolean | false | current open state of picker. controlled prop |
suffixIcon | ReactNode | The custom suffix icon | |
clearIcon | ReactNode | The custom clear icon | |
prevIcon | ReactNode | The custom prev icon | |
nextIcon | ReactNode | The custom next icon | |
superPrevIcon | ReactNode | The custom super prev icon | |
superNextIcon | ReactNode | The custom super next icon | |
disabled | Boolean | false | whether the picker is disabled |
placeholder | String | picker input's placeholder | |
getPopupContainer | function(trigger) | to set the container of the floating layer, while the default is to create a div element in body | |
onChange | Function(date: moment, dateString: string) | a callback function, can be executed when the selected time is changing | |
onOpenChange | Function(open:boolean) | called when open/close picker | |
onFocus | (event:React.FocusEvent | called like input's on focus | |
onBlur | (event:React.FocusEvent | called like input's on blur | |
onKeyDown | (event:React.KeyboardEvent | input on keydown event | |
direction | String: ltr or rtl | Layout direction of picker component, it supports RTL direction too. |
PickerPanel
Property | Type | Default | Description |
---|---|---|---|
prefixCls | String | rc-picker | prefixCls of this component |
className | String | '' | additional css class of root dom |
style | React.CSSProperties | additional style of root dom node | |
locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale |
value | moment | current value like input's value | |
defaultValue | moment | defaultValue like input's defaultValue | |
defaultPickerValue | moment | Set default display picker view date | |
mode | time | datetime | date | week | month | year | decade | control which kind of panel | |
picker | time | date | week | month | year | control which kind of panel | |
tabIndex | Number | 0 | view tabIndex |
showTime | Boolean | Object | showTime options | to provide an additional time selection |
showToday | Boolean | false | whether to show today button |
disabledDate | Function(date:moment) => Boolean | whether to disable select of current date | |
dateRender | Function(currentDate:moment, today:moment) => React.Node | custom rendering function for date cells | |
monthCellRender | Function(currentDate:moment, locale:Locale) => React.Node | Custom month cell render method | |
renderExtraFooter | (mode) => React.Node | extra footer | |
onSelect | Function(date: moment) | a callback function, can be executed when the selected time | |
onPanelChange | Function(value: moment, mode) | callback when picker panel mode is changed | |
onMouseDown | (event:React.MouseEvent | callback when executed onMouseDown evnent | |
direction | String: ltr or rtl | Layout direction of picker component, it supports RTL direction too. |
RangePicker
| Property | Type | Default | Description | | --- | --- | --- | --- | --- | | prefixCls | String | rc-picker | prefixCls of this component | | className | String | '' | additional css class of root dom | | style | React.CSSProperties | | additional style of root dom node | | locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale | | value | moment | | current value like input's value | | defaultValue | moment | | defaultValue like input's defaultValue | | defaultPickerValue | moment | | Set default display picker view date | | separator | String | '~' | set separator between inputs | | picker | time | date | week | month | year | | control which kind of panel | | placeholder | [String, String] | | placeholder of date input | | showTime | Boolean | Object | showTime options | to provide an additional time selection | | showTime.defaultValue | [moment, moment] | | to set default time of selected date | | use12Hours | Boolean | false | 12 hours display mode | | disabledTime | Function(date: moment, type:'start'|'end'):Object | | | to specify the time that cannot be selected | | ranges | { String | [range: string]: moment[] } | { [range: string]: () => moment[] } | | preseted ranges for quick selection | | format | String | String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display | | allowEmpty | [Boolean, Boolean] | | allow range picker clearing text | | selectable | [Boolean, Boolean] | | whether to selected picker | | disabled | Boolean | false | whether the range picker is disabled | | onChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the selected time is changing | | onCalendarChange | Function(value:[moment], formatString: [string, string], info: { range:'start'|'end' }) | | a callback function, can be executed when the start time or the end time of the range is changing | | direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. | | order | Boolean | true | (TimeRangePicker only) false
to disable auto order |
showTime-options
Property | Type | Default | Description |
---|---|---|---|
format | String | moment format | |
showHour | Boolean | true | whether show hour |
showMinute | Boolean | true | whether show minute |
showSecond | Boolean | true | whether show second |
use12Hours | Boolean | false | 12 hours display mode |
hourStep | Number | 1 | interval between hours in picker |
minuteStep | Number | 1 | interval between minutes in picker |
secondStep | Number | 1 | interval between seconds in picker |
hideDisabledOptions | Boolean | false | whether hide disabled options |
defaultValue | moment | null | default initial value |
Development
npm install
npm start
License
rc-picker is released under the MIT license.