--- /dev/null
+*.iml
+*.log
+.idea/
+.ipr
+.iws
+*~
+~*
+*.diff
+*.patch
+*.bak
+.DS_Store
+Thumbs.db
+.project
+.*proj
+.svn/
+*.swp
+*.swo
+*.pyc
+*.pyo
+.build
+node_modules
+.cache
+dist
+*.css
+build
+lib
+
---
+0.2.0 / 2015-11-16
+------------------
+
+`update` rename the component, update document.
+
0.1.0 / 2015-11-12
------------------
-# timepicker
-Timepicker
+TimePicker
+==========
+
+React TimePicker
+
+install
+-------
+
+```
+npm install rc-time-picker
+```
+
+Usage
+-----
+
+```
+import TimePicker from 'rc-time-picker';
+import React from 'react';
+import ReactDOM from 'react-dom';
+ReactDOM.render(<TimePicker />, container);
+```
+
+API
+---
+
+### TimePanel
+
+| Name | Type | Default | Description |
+|---------------|----------------------------|-----------------------------------------------|-----------------------------------------------|
+| prefixCls | String | | prefixCls of this component |
+| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | |
+| defaultValue | GregorianCalendar | null | defaultValue like input's defaultValue |
+| placeholder | String | '' | time input's placeholder |
+| formatter | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss | |
+| hourOptions | Array<String> | hour options | |
+| minuteOptions | Array<String> | minute options | |
+| secondOptions | Array<String> | second options | |
+| onChange | Function | null | called when input or select a different value |
+
+### TimePicker
+
+| Name | Type | Default | Description |
+|-----------|-------------------------|---------|-----------------------------------------------|
+| prefixCls | String | | prefixCls of this component |
+| panel | TimePanel React Element | | |
+| disabled | Boolean | false | whether picker is disabled |
+| open | Boolean | false | current open state of picker. controlled prop |
+| value | GregorianCalendar | null | current value like input's value |
+| onChange | Function | null | called when select a different value |
+| onOpen | Function | null | called when open picker |
+| onClose | Function | null | called when close picker |
+
+License
+-------
+
+rc-time-picker is released under the MIT license.
-@prefixClass: rc-timepicker;
+@prefixClass: rc-time-picker;
.@{prefixClass} {
+ display: inline;
box-sizing: border-box;
* {
box-sizing: border-box;
--- /dev/null
+placeholder
-import '../component/timepicker/assets/index.less';
+import 'rc-time-picker/assets/index.less';
import React from 'react';
import ReactDom from 'react-dom';
-import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
-import GregorianCalendar from 'gregorian-calendar';
-import TimePicker from '../component/timepicker/src/Picker';
-import TimePanel from '../component/timepicker/src/TimePanel';
-import TimepickerLocale from '../component/timepicker/src/locale/zh_CN';
+import GregorianCalendar from 'gregorian-calendar';
import DateTimeFormat from 'gregorian-calendar-format';
+import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
+
+import TimePicker from 'rc-time-picker/src/TimePicker';
+import TimePanel from 'rc-time-picker/src/TimePanel';
+import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
const formatter = new DateTimeFormat('HH:mm:ss');
const timePanel = (
<TimePanel
defaultValue={now}
- locale={TimepickerLocale}
+ locale={TimePickerLocale}
formatter={formatter}
minuteOptions={[0, 30]}
/>
}
}
</TimePicker>,
- document.getElementById('react-content')
+ document.getElementById('__react-content')
);
{
- "name": "rc-timepicker",
- "version": "0.1.0",
- "description": "React Timepicker",
+ "name": "rc-time-picker",
+ "version": "0.2.0",
+ "description": "React TimePicker",
"keywords": [
"react",
- "react-timepicker",
+ "react-time-picker",
"react-component",
"timepicker",
+ "time-picker",
"ui component",
"ui",
"component"
"assets/*.css"
],
"main": "lib/index",
- "homepage": "http://github.com/react-component/timepicker",
+ "homepage": "http://github.com/react-component/time-picker",
"author": "wuzhao.mail@gmail.com",
"repository": {
"type": "git",
- "url": "git@github.com:react-component/timepicker.git"
+ "url": "git@github.com:react-component/time-picker.git"
},
"bugs": {
- "url": "http://github.com/react-component/timepicker/issues"
+ "url": "http://github.com/react-component/time-picker/issues"
},
"licenses": "MIT",
"config": {
"lint"
],
"dependencies": {
+ "classnames": "~2.2.0",
"gregorian-calendar": "4.x",
"gregorian-calendar-format": "4.x",
"object-assign": "4.x",
<div className={`${prefixCls}-panel ${cls}`}>
<Header
prefixCls={prefixCls}
- gregorianTimepickerLocale={defaultValue.locale}
+ gregorianTimePickerLocale={defaultValue.locale}
locale={locale}
value={value}
formatter={this.getFormatter()}
return { open, value };
},
- componentWillMount() {
- document.addEventListener('click', this.handleDocumentClick, false);
- },
-
componentWillReceiveProps(nextProps) {
const { value, open } = nextProps;
if (value !== undefined) {
}
},
- componentWillUnmount() {
- document.removeEventListener('click', this.handleDocumentClick, false);
- },
-
onPanelChange(value) {
const props = this.props;
this.setState({
}
},
- handleDocumentClick(event) {
- // hide popup when click outside
- if (this.state.open && ReactDOM.findDOMNode(this.panelInstance).contains(event.target)) {
- return;
- }
- this.setState({
- open: false,
- });
- },
-
focus() {
if (!this.state.open) {
ReactDOM.findDOMNode(this).focus();
--- /dev/null
+import TimePicker from './TimePicker';
+export default TimePicker;
getDefaultProps() {
return {
- prefixCls: 'rc-timepicker',
+ prefixCls: 'rc-time-picker',
locale: enUs,
};
},
propTypes: {
formatter: PropTypes.object,
prefixCls: PropTypes.string,
- gregorianTimepickerLocale: PropTypes.object,
+ gregorianTimePickerLocale: PropTypes.object,
locale: PropTypes.object,
disabledDate: PropTypes.func,
placeholder: PropTypes.string,
},
componentWillReceiveProps(nextProps) {
- const value = this.formatValue(nextProps.value);
+ const value = nextProps.value;
this.setState({
str: value && nextProps.formatter.format(value) || '',
invalid: false,
str,
});
let value = null;
- const {formatter, gregorianTimepickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
+ const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
if (str) {
const originalValue = this.props.value;
try {
value = formatter.parse(str, {
- locale: gregorianTimepickerLocale,
+ locale: gregorianTimePickerLocale,
obeyCount: true,
});
- value = this.formatValue(value);
} catch (ex) {
this.setState({
invalid: true,
return <input className={`${prefixCls}-input ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />;
},
- formatValue(value) {
- const newValue = this.props.value.clone();
- if (!value) {
- return newValue;
- }
- newValue.fields[4] = value.fields[4];
- newValue.fields[5] = value.fields[5];
- newValue.fields[6] = value.fields[6];
- return newValue;
- },
-
render() {
const { prefixCls } = this.props;
return (