import React, { PropTypes } from 'react';
import Trigger from 'rc-trigger';
-import Panel from './module/Panel';
-import placements from './util/placements';
-import CommonMixin from './mixin/CommonMixin';
-import { getFormatter } from './util/index';
+import Panel from './Panel';
+import placements from './placements';
+import moment from 'moment';
function noop() {
}
const Picker = React.createClass({
propTypes: {
prefixCls: PropTypes.string,
- locale: PropTypes.object,
+ clearText: PropTypes.string,
value: PropTypes.object,
+ defaultOpenValue: PropTypes.object,
disabled: PropTypes.bool,
allowEmpty: PropTypes.bool,
defaultValue: PropTypes.object,
transitionName: PropTypes.string,
getPopupContainer: PropTypes.func,
placeholder: PropTypes.string,
- formatter: PropTypes.any,
+ format: PropTypes.string,
showHour: PropTypes.bool,
+ showMinute: PropTypes.bool,
+ showSecond: PropTypes.bool,
style: PropTypes.object,
className: PropTypes.string,
- showSecond: PropTypes.bool,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
onChange: PropTypes.func,
onOpen: PropTypes.func,
onClose: PropTypes.func,
+ addon: PropTypes.func,
+ name: PropTypes.string,
+ autoComplete: PropTypes.string,
+ use12Hours: PropTypes.bool,
},
- mixins: [CommonMixin],
-
getDefaultProps() {
return {
+ clearText: 'clear',
+ prefixCls: 'rc-time-picker',
defaultOpen: false,
style: {},
className: '',
align: {},
+ defaultOpenValue: moment(),
allowEmpty: true,
showHour: true,
+ showMinute: true,
showSecond: true,
disabledHours: noop,
disabledMinutes: noop,
onChange: noop,
onOpen: noop,
onClose: noop,
+ addon: noop,
+ use12Hours: false,
};
},
getInitialState() {
+ this.saveInputRef = refFn.bind(this, 'picker');
this.savePanelRef = refFn.bind(this, 'panelInstance');
const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
return {
onEsc() {
this.setOpen(false);
- this.refs.picker.focus();
+ this.focus();
},
onKeyDown(e) {
this.props.onChange(value);
},
- getFormatter() {
- const formatter = this.props.formatter;
- const locale = this.props.locale;
- if (formatter) {
- if (formatter === this.lastFormatter) {
- return this.normalFormatter;
- }
- this.normalFormatter = getFormatter(formatter, locale);
- this.lastFormatter = formatter;
- return this.normalFormatter;
- }
- if (!this.props.showSecond) {
- if (!this.notShowSecondFormatter) {
- this.notShowSecondFormatter = getFormatter('HH:mm', locale);
- }
- return this.notShowSecondFormatter;
- }
- if (!this.props.showHour) {
- if (!this.notShowHourFormatter) {
- this.notShowHourFormatter = getFormatter('mm:ss', locale);
- }
- return this.notShowHourFormatter;
+ getFormat() {
+ const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
+ if (format) {
+ return format;
}
- if (!this.normalFormatter) {
- this.normalFormatter = getFormatter('HH:mm:ss', locale);
+
+ if (use12Hours) {
+ const fmtString = ([
+ showHour ? 'h' : '',
+ showMinute ? 'mm' : '',
+ showSecond ? 'ss' : '',
+ ].filter(item => !!item).join(':'));
+
+ return fmtString.concat(' a');
}
- return this.normalFormatter;
+
+ return [
+ showHour ? 'HH' : '',
+ showMinute ? 'mm' : '',
+ showSecond ? 'ss' : '',
+ ].filter(item => !!item).join(':');
},
getPanelElement() {
const {
- prefixCls, defaultValue, locale, placeholder, disabledHours,
+ prefixCls, placeholder, disabledHours,
disabledMinutes, disabledSeconds, hideDisabledOptions,
- allowEmpty, showHour, showSecond,
+ allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
+ addon, use12Hours,
} = this.props;
return (
<Panel
+ clearText={clearText}
prefixCls={`${prefixCls}-panel`}
ref={this.savePanelRef}
value={this.state.value}
onChange={this.onPanelChange}
- gregorianCalendarLocale={locale.calendar}
onClear={this.onPanelClear}
- defaultValue={defaultValue}
+ defaultOpenValue={defaultOpenValue}
showHour={showHour}
- onEsc={this.onEsc}
+ showMinute={showMinute}
showSecond={showSecond}
- locale={locale}
+ onEsc={this.onEsc}
allowEmpty={allowEmpty}
- formatter={this.getFormatter()}
+ format={this.getFormat()}
placeholder={placeholder}
disabledHours={disabledHours}
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
hideDisabledOptions={hideDisabledOptions}
+ use12Hours={use12Hours}
+ addon={addon}
/>
);
},
- setOpen(open, callback) {
+ setOpen(open) {
const { onOpen, onClose } = this.props;
if (this.state.open !== open) {
- this.setState({
- open,
- }, callback);
- const event = {
- open,
- };
+ if (!('open' in this.props)) {
+ this.setState({ open });
+ }
if (open) {
- onOpen(event);
+ onOpen({ open });
} else {
- onClose(event);
+ onClose({ open });
}
}
},
+ focus() {
+ this.picker.focus();
+ },
+
render() {
- const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, showHour, showSecond, getPopupContainer } = this.props;
+ const {
+ prefixCls, placeholder, placement, align,
+ disabled, transitionName, style, className, showHour,
+ showMinute, showSecond, getPopupContainer, name, autoComplete,
+ use12Hours,
+ } = this.props;
const { open, value } = this.state;
let popupClassName;
- if (!showHour || !showSecond) {
+ if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
popupClassName = `${prefixCls}-panel-narrow`;
}
return (
<span className={`${prefixCls} ${className}`} style={style}>
<input
className={`${prefixCls}-input`}
- ref="picker" type="text" placeholder={placeholder}
+ ref={this.saveInputRef}
+ type="text"
+ placeholder={placeholder}
+ name={name}
readOnly
onKeyDown={this.onKeyDown}
- disabled={disabled} value={value && this.getFormatter().format(value) || ''}
+ disabled={disabled} value={value && value.format(this.getFormat()) || ''}
+ autoComplete={autoComplete}
/>
<span className={`${prefixCls}-icon`}/>
</span>