diff --git a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap index 51f4779c9f..97b6a0de74 100644 --- a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap +++ b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap @@ -1,5 +1,52 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = ` +
+ + + + + + + + + + + + +
+`; + exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = ` + + + + +, mountNode); +```` diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index e59767b45a..f437ef933c 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -27,13 +27,14 @@ import moment from 'moment'; | value | to set time | [moment](http://momentjs.com/) | - | | placeholder | display when there's no value | string | "Select a time" | | onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - | -| format | to set the time format | string | "HH:mm:ss"、"HH:mm"、"mm:ss" | +| format | to set the time format | string | "HH:mm:ss" | | disabled | determine whether the TimePicker is disabled | boolean | false | | disabledHours | to specify the hours that cannot be selected | function() | - | | disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - | | disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - | | hideDisabledOptions | hide the options that can not be selected | boolean | false | | getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | -| addon | called from timepicker panel to render some addon to its bottom | function | 无 | +| addon | called from timepicker panel to render some addon to its bottom | function | - | +| use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false | diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index dd0a029b44..dd74a02e29 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -22,6 +22,7 @@ export interface TimePickerProps { style?: React.CSSProperties; getPopupContainer?: (trigger: any) => any; addon?: Function; + use12Hours?: boolean; } abstract class TimePicker extends React.Component { @@ -81,10 +82,21 @@ abstract class TimePicker extends React.Component { this.timePickerRef.focus(); } + getDefaultFormat() { + const { format, use12Hours } = this.props; + if (format) { + return format; + } else if (use12Hours) { + return 'h:mm:ss a'; + } + return 'HH:mm:ss'; + } + render() { - const props = assign({ format: 'HH:mm:ss' }, this.props); + const props = assign({}, this.props); delete props.defaultValue; + const format = this.getDefaultFormat(); const className = classNames(props.className, { [`${props.prefixCls}-${props.size}`]: !!props.size, }); @@ -101,12 +113,13 @@ abstract class TimePicker extends React.Component { -1} - showMinute={props.format.indexOf('mm') > -1} - showSecond={props.format.indexOf('ss') > -1} + showHour={format.indexOf('HH') > -1 || format.indexOf('h') > -1} + showMinute={format.indexOf('mm') > -1} + showSecond={format.indexOf('ss') > -1} onChange={this.handleChange} addon={addon} /> diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index e8aaeb3c1d..594709a92b 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -28,7 +28,7 @@ import moment from 'moment'; | value | 当前时间 | [moment](http://momentjs.com/) | 无 | | placeholder | 没有值的时候显示的内容 | string | "请选择时间" | | onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 | -| format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" | +| format | 展示的时间格式 | string | "HH:mm:ss" | | disabled | 禁用全部操作 | boolean | false | | disabledHours | 禁止选择部分小时选项 | function() | 无 | | disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 | @@ -36,5 +36,6 @@ import moment from 'moment'; | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | | getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 | | addon | 选择框底部显示自定义的内容 | function | 无 | +| use12Hours | 使用 12 小时制,为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index a91a2b70b3..f937bc5bcf 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -5,7 +5,6 @@ @timepicker-prefix-cls: ~"@{ant-prefix}-time-picker"; .@{timepicker-prefix-cls}-panel { - max-width: @time-picker-panel-width; z-index: @zindex-picker; position: absolute; diff --git a/package.json b/package.json index 476f73fabc..f746a7e73d 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "rc-switch": "~1.4.2", "rc-table": "~5.2.13", "rc-tabs": "~7.3.0", - "rc-time-picker": "~2.2.1", + "rc-time-picker": "~2.3.3", "rc-tooltip": "~3.4.2", "rc-tree": "~1.4.0", "rc-tree-select": "~1.9.0",