@aaxis/rc-picker 中文文档教程

发布于 3年前 浏览 33 更新于 3年前

rc-picker

NPM 版本构建状态Codecov依赖项DevDependenciesnpm downloadbundle size

Live Demo

https://react -component.github.io/picker/

Install

rc-picker

Usage

import Picker from 'rc-picker';
import 'rc-picker/assets/index.css';
import { render } from 'react-dom';

render(<Picker />, mountNode);

API

Picker

PropertyTypeDefaultDescription
prefixClsStringrc-pickerprefixCls of this component
classNameString''additional css class of root dom node
styleReact.CSSPropertiesadditional style of root dom node
dropdownClassNameString''additional className applied to dropdown
dropdownAlignObject:alignConfig of dom-alignvalue will be merged into placement's dropdownAlign config
popupStyleReact.CSSPropertiescustomize popup style
transitionNameString''css class for animation
localeObjectimport from 'rc-picker/lib/locale/en_US'rc-picker locale
inputReadOnlyBooleanfalseset input to read only
allowClearBooleanfalsewhether show clear button
autoFocusBooleanfalsewhether auto focus
showTimeBoolean | ObjectshowTime optionsto provide an additional time selection
pickertime | date | week | month | yearcontrol which kind of panel should be shown
formatString | String[]depends on whether you set timePicker and your localeuse 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
use12HoursBooleanfalse12 hours display mode
valuemomentcurrent value like input's value
defaultValuemomentdefaultValue like input's defaultValue
openBooleanfalsecurrent open state of picker. controlled prop
suffixIconReactNodeThe custom suffix icon
clearIconReactNodeThe custom clear icon
prevIconReactNodeThe custom prev icon
nextIconReactNodeThe custom next icon
superPrevIconReactNodeThe custom super prev icon
superNextIconReactNodeThe custom super next icon
disabledBooleanfalsewhether the picker is disabled
placeholderStringpicker input's placeholder
getPopupContainerfunction(trigger)to set the container of the floating layer, while the default is to create a div element in body
onChangeFunction(date: moment, dateString: string)a callback function, can be executed when the selected time is changing
onOpenChangeFunction(open:boolean)called when open/close picker
onFocus(event:React.FocusEvent) => voidcalled like input's on focus
onBlur(event:React.FocusEvent) => voidcalled like input's on blur
onKeyDown(event:React.KeyboardEvent, preventDefault: () => void) => voidinput on keydown event
directionString: ltr or rtlLayout direction of picker component, it supports RTL direction too.

PickerPanel

PropertyTypeDefaultDescription
prefixClsStringrc-pickerprefixCls of this component
classNameString''additional css class of root dom
styleReact.CSSPropertiesadditional style of root dom node
localeObjectimport from 'rc-picker/lib/locale/en_US'rc-picker locale
valuemomentcurrent value like input's value
defaultValuemomentdefaultValue like input's defaultValue
defaultPickerValuemomentSet default display picker view date
modetime | datetime | date | week | month | year | decadecontrol which kind of panel
pickertime | date | week | month | yearcontrol which kind of panel
tabIndexNumber0view tabIndex
showTimeBoolean | ObjectshowTime optionsto provide an additional time selection
showTodayBooleanfalsewhether to show today button
disabledDateFunction(date:moment) => Booleanwhether to disable select of current date
dateRenderFunction(currentDate:moment, today:moment) => React.Nodecustom rendering function for date cells
monthCellRenderFunction(currentDate:moment, locale:Locale) => React.NodeCustom month cell render method
renderExtraFooter(mode) => React.Nodeextra footer
onSelectFunction(date: moment)a callback function, can be executed when the selected time
onPanelChangeFunction(value: moment, mode)callback when picker panel mode is changed
onMouseDown(event:React.MouseEvent) => voidcallback when executed onMouseDown evnent
directionString: ltr or rtlLayout 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

PropertyTypeDefaultDescription
formatStringmoment format
showHourBooleantruewhether show hour
showMinuteBooleantruewhether show minute
showSecondBooleantruewhether show second
use12HoursBooleanfalse12 hours display mode
hourStepNumber1interval between hours in picker
minuteStepNumber1interval between minutes in picker
secondStepNumber1interval between seconds in picker
hideDisabledOptionsBooleanfalsewhether hide disabled options
defaultValuemomentnulldefault initial value

Development

npm install
npm start

License

rc-picker 在 MIT 许可证下发布。

rc-picker

NPM versionbuild statusCodecovDependenciesDevDependenciesnpm downloadbundle size

Live Demo

https://react-component.github.io/picker/

Install

rc-picker

Usage

import Picker from 'rc-picker';
import 'rc-picker/assets/index.css';
import { render } from 'react-dom';

render(<Picker />, mountNode);

API

Picker

PropertyTypeDefaultDescription
prefixClsStringrc-pickerprefixCls of this component
classNameString''additional css class of root dom node
styleReact.CSSPropertiesadditional style of root dom node
dropdownClassNameString''additional className applied to dropdown
dropdownAlignObject:alignConfig of dom-alignvalue will be merged into placement's dropdownAlign config
popupStyleReact.CSSPropertiescustomize popup style
transitionNameString''css class for animation
localeObjectimport from 'rc-picker/lib/locale/en_US'rc-picker locale
inputReadOnlyBooleanfalseset input to read only
allowClearBooleanfalsewhether show clear button
autoFocusBooleanfalsewhether auto focus
showTimeBoolean | ObjectshowTime optionsto provide an additional time selection
pickertime | date | week | month | yearcontrol which kind of panel should be shown
formatString | String[]depends on whether you set timePicker and your localeuse 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
use12HoursBooleanfalse12 hours display mode
valuemomentcurrent value like input's value
defaultValuemomentdefaultValue like input's defaultValue
openBooleanfalsecurrent open state of picker. controlled prop
suffixIconReactNodeThe custom suffix icon
clearIconReactNodeThe custom clear icon
prevIconReactNodeThe custom prev icon
nextIconReactNodeThe custom next icon
superPrevIconReactNodeThe custom super prev icon
superNextIconReactNodeThe custom super next icon
disabledBooleanfalsewhether the picker is disabled
placeholderStringpicker input's placeholder
getPopupContainerfunction(trigger)to set the container of the floating layer, while the default is to create a div element in body
onChangeFunction(date: moment, dateString: string)a callback function, can be executed when the selected time is changing
onOpenChangeFunction(open:boolean)called when open/close picker
onFocus(event:React.FocusEvent) => voidcalled like input's on focus
onBlur(event:React.FocusEvent) => voidcalled like input's on blur
onKeyDown(event:React.KeyboardEvent, preventDefault: () => void) => voidinput on keydown event
directionString: ltr or rtlLayout direction of picker component, it supports RTL direction too.

PickerPanel

PropertyTypeDefaultDescription
prefixClsStringrc-pickerprefixCls of this component
classNameString''additional css class of root dom
styleReact.CSSPropertiesadditional style of root dom node
localeObjectimport from 'rc-picker/lib/locale/en_US'rc-picker locale
valuemomentcurrent value like input's value
defaultValuemomentdefaultValue like input's defaultValue
defaultPickerValuemomentSet default display picker view date
modetime | datetime | date | week | month | year | decadecontrol which kind of panel
pickertime | date | week | month | yearcontrol which kind of panel
tabIndexNumber0view tabIndex
showTimeBoolean | ObjectshowTime optionsto provide an additional time selection
showTodayBooleanfalsewhether to show today button
disabledDateFunction(date:moment) => Booleanwhether to disable select of current date
dateRenderFunction(currentDate:moment, today:moment) => React.Nodecustom rendering function for date cells
monthCellRenderFunction(currentDate:moment, locale:Locale) => React.NodeCustom month cell render method
renderExtraFooter(mode) => React.Nodeextra footer
onSelectFunction(date: moment)a callback function, can be executed when the selected time
onPanelChangeFunction(value: moment, mode)callback when picker panel mode is changed
onMouseDown(event:React.MouseEvent) => voidcallback when executed onMouseDown evnent
directionString: ltr or rtlLayout 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

PropertyTypeDefaultDescription
formatStringmoment format
showHourBooleantruewhether show hour
showMinuteBooleantruewhether show minute
showSecondBooleantruewhether show second
use12HoursBooleanfalse12 hours display mode
hourStepNumber1interval between hours in picker
minuteStepNumber1interval between minutes in picker
secondStepNumber1interval between seconds in picker
hideDisabledOptionsBooleanfalsewhether hide disabled options
defaultValuemomentnulldefault initial value

Development

npm install
npm start

License

rc-picker is released under the MIT license.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文