Rc-time-picker NPM | npm.io

3.7.3 • Published 4 years ago

Install

Weekly downloads

225,741

License

-

Repository

Last release

4 years ago

TimePicker

React TimePicker

example

http://react-component.github.io/time-picker/

install

npm install rc-time-picker

Usage

import TimePicker from 'rc-time-picker';
import ReactDOM from 'react-dom';
import 'rc-time-picker/assets/index.css';
ReactDOM.render(<TimePicker />, container);

API

TimePicker

Name	Type	Default	Description
prefixCls	String	'rc-time-picker'	prefixCls of this component
clearText	String	'clear'	clear tooltip of icon
disabled	Boolean	false	whether picker is disabled
allowEmpty	Boolean	true	allow clearing text
open	Boolean	false	current open state of picker. controlled prop
defaultValue	moment	null	default initial value
defaultOpenValue	moment	moment()	default open panel value, used to set utcOffset,locale if value/defaultValue absent
value	moment	null	current value
placeholder	String	''	time input's placeholder
className	String	''	time picker className
id	String	''	time picker id
popupClassName	String	''	time panel className
popupStyle	object	{}	customize popup style
showHour	Boolean	true	whether show hour
showMinute	Boolean	true	whether show minute
showSecond	Boolean	true	whether show second
format	String	-	moment format
disabledHours	Function	-	disabled hour options
disabledMinutes	Function	-	disabled minute options
disabledSeconds	Function	-	disabled second options
use12Hours	Boolean	false	12 hours display mode
hideDisabledOptions	Boolean	false	whether hide disabled options
onChange	Function	null	called when select a different value
onAmPmChange	Function	null	called when select an am/pm value
addon	Function	-	called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like `panel.close()`.
placement	String	bottomLeft	one of 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
transitionName	String	''
name	String	-	sets the name of the generated input
onOpen	Function({ open })		when TimePicker panel is opened
onClose	Function({ open })		when TimePicker panel is closed
hourStep	Number	1	interval between hours in picker
minuteStep	Number	1	interval between minutes in picker
secondStep	Number	1	interval between seconds in picker
focusOnOpen	Boolean	false	automatically focus the input when the picker opens
inputReadOnly	Boolean	false	set input to read only
inputIcon	ReactNode		specific the select icon.
clearIcon	ReactNode		specific the clear icon.

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-time-picker is released under the MIT license.

react react-time-picker react-component timepicker time-picker ui component ui component

classnames moment prop-types raf rc-trigger react-lifecycles-compat

@bidalgo/ui-kit @sprucelabs/react-heartwood-components @plone/volto @grafana/ui haravan-react-components @bushuai/uni-test yzhantd antd-zp react-component-date g2_v587_gv587_admin pcx-react-controls @caoyongmeng/ui-1 bigendianui hybrid-librarygroups-test ybbtestui1 @xanda/react-components beeui j-beeui @paraponera/antd addnewer-ui antds xc-mobile xcmobiles sunmnetbi sunmnetfront farshid-kit-test-123 antd-without-babel maycur-antd luck-design-test mp_story_book @everything-registry/sub-chunk-2535 finch-frontend-web-components8 oui-antd owld olymc para-ui palace-bot palmax-ui palmax-ui-test pantui panzilongtest nsky-ant nsky-test noi-antd mj-components mkui-ext mimiron2 mode-coms mfb-r16 parsec-mycos-antd pckit pps-formula-edit monkeyui mozart-ui nake-antd my-ui-cd myinvisalign qiaozui znly-ui bigsec-ui @casstime/bricks @cashub/ui biosan-ui biz-auto-form @divio/ui blueprint-hooks-ui @caoyongmeng/ui bntd bui-antd @clinia/uikit c8-styled-big-calendar @cryptoarsenal/react-date-range @cryptoarsenal/react-datetime-range casumarzu cge-app-modules wddesign web-backoffice-new @viralgains/react-date-range asp-antd-compatible ziaochina-antd auto-form-create ywqsimmon-antd @beisen-platform/date-time bcsd @buyfood/components b2b-base-view @barbershopio/react-sprucebot bach-antd beam-health beauti bee-datepicker @byhealth/antd yrantd zcontrol zcontrolfix zcy-antd zeal-cube axxd axx-design

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago