### Install and Start rc-picker Development Environment Source: https://github.com/react-component/picker/blob/master/README.md Instructions for setting up and running the development environment for the rc-picker React component using npm commands. ```bash npm install npm start ``` -------------------------------- ### PickerPanel Component API Reference Source: https://github.com/react-component/picker/blob/master/README.md API documentation for the `PickerPanel` component, including properties for styling, localization, value management, display modes, and event handling for single date/time selection. ```APIDOC PickerPanel: Properties: - 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) - showTime: boolean | Object ([showTime options](#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) => void - callback when executed onMouseDown event - direction: String: ltr or rtl - Layout direction of picker component, it supports RTL direction too. ``` -------------------------------- ### Basic Usage of rc-picker Component in React Source: https://github.com/react-component/picker/blob/master/README.md This snippet demonstrates how to import and render the `rc-picker` component in a React application. It includes the necessary imports for the component itself, its default CSS styles, and `react-dom` for mounting the component into the DOM. ```js import Picker from 'rc-picker'; import 'rc-picker/assets/index.css'; import { render } from 'react-dom'; render(, mountNode); ``` -------------------------------- ### RangePicker Component API Reference Source: https://github.com/react-component/picker/blob/master/README.md API documentation for the `RangePicker` component, detailing properties for range selection, time display, formatting, and various callbacks for change events, including specific options for start/end times. ```APIDOC RangePicker: Properties: - 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](#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 ``` -------------------------------- ### API Reference for rc-picker Component Properties Source: https://github.com/react-component/picker/blob/master/README.md This section provides a comprehensive API reference for the `rc-picker` component, detailing all available properties, their types, default values, and descriptions. It covers various configuration options for styling, localization, component behavior, and event handling, allowing for extensive customization. ```APIDOC Picker Component API: prefixCls: string (default: 'rc-picker') Description: prefixCls of this component className: string (default: '') Description: additional css class of root dom node style: React.CSSProperties Description: additional style of root dom node dropdownClassName: string (default: '') Description: additional className applied to dropdown popupAlign: Object:alignConfig of [dom-align](https://github.com/yiminghe/dom-align) Description: value will be merged into placement's popupAlign config popupStyle: React.CSSProperties Description: customize popup style transitionName: string (default: '') Description: css class for animation locale: Object (default: import from 'rc-picker/lib/locale/en_US') Description: rc-picker locale inputReadOnly: boolean (default: false) Description: set input to read only allowClear: boolean | { clearIcon?: ReactNode } (default: false) Description: whether show clear button or customize clear button autoFocus: boolean (default: false) Description: whether auto focus showTime: boolean | Object (default: [showTime options](#showTime-options)) Description: to provide an additional time selection picker: 'time' | 'date' | 'week' | 'month' | 'year' Description: control which kind of panel should be shown format: string | string[] (default: depends on whether you set timePicker and your locale) Description: 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 (default: false) Description: 12 hours display mode value: moment Description: current value like input's value defaultValue: moment Description: defaultValue like input's defaultValue open: boolean (default: false) Description: current open state of picker. controlled prop suffixIcon: ReactNode Description: The custom suffix icon prevIcon: ReactNode Description: The custom prev icon nextIcon: ReactNode Description: The custom next icon superPrevIcon: ReactNode Description: The custom super prev icon superNextIcon: ReactNode Description: The custom super next icon disabled: boolean (default: false) Description: whether the picker is disabled placeholder: string Description: picker input's placeholder getPopupContainer: function(trigger) Description: 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) Description: a callback function, can be executed when the selected time is changing onOpenChange: Function(open:boolean) Description: called when open/close picker onFocus: (event:React.FocusEvent) => void Description: called like input's on focus onBlur: (event:React.FocusEvent) => void Description: called like input's on blur onKeyDown: (event:React.KeyboardEvent, preventDefault: () => void) => void Description: input on keydown event direction: string ('ltr' or 'rtl') Description: Layout direction of picker component, it supports RTL direction too. ``` -------------------------------- ### showTime-options Properties for rc-picker Component Source: https://github.com/react-component/picker/blob/master/README.md Defines the configurable properties for the `showTime` functionality within the rc-picker React component, including formatting, display modes, and step intervals for time selection. ```APIDOC showTime-options: format: String (Default: ) - moment format showHour: boolean (Default: true) - whether show hour showMinute: boolean (Default: true) - whether show minute showSecond: boolean (Default: true) - whether show second use12Hours: boolean (Default: false) - 12 hours display mode hourStep: Number (Default: 1) - interval between hours in picker minuteStep: Number (Default: 1) - interval between minutes in picker secondStep: Number (Default: 1) - interval between seconds in picker hideDisabledOptions: boolean (Default: false) - whether hide disabled options defaultValue: moment (Default: null) - default initial value ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.