onOpen: PropTypes.func,
onClose: PropTypes.func,
addon: PropTypes.func,
+ name: PropTypes.string,
+ autoComplete: PropTypes.string,
+ use12Hours: PropTypes.bool,
},
getDefaultProps() {
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 {
},
getFormat() {
- const { format, showHour, showMinute, showSecond } = this.props;
+ const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
if (format) {
return format;
}
+
+ if (use12Hours) {
+ const fmtString = ([
+ showHour ? 'h' : '',
+ showMinute ? 'mm' : '',
+ showSecond ? 'ss' : '',
+ ].filter(item => !!item).join(':'));
+
+ return fmtString.concat(' a');
+ }
+
return [
showHour ? 'HH' : '',
showMinute ? 'mm' : '',
prefixCls, placeholder, disabledHours,
disabledMinutes, disabledSeconds, hideDisabledOptions,
allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
- addon,
+ addon, use12Hours,
} = this.props;
return (
<Panel
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.refs.picker.focus();
+ this.picker.focus();
},
render() {
const {
prefixCls, placeholder, placement, align,
disabled, transitionName, style, className, showHour,
- showMinute, showSecond, getPopupContainer,
+ showMinute, showSecond, getPopupContainer, name, autoComplete,
+ use12Hours,
} = this.props;
const { open, value } = this.state;
let popupClassName;
- if (!showHour || !showMinute || !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 && value.format(this.getFormat()) || ''}
+ autoComplete={autoComplete}
/>
<span className={`${prefixCls}-icon`}/>
</span>