feat: 12 hours time picker (#5434)

* TimePicker support 12 hours format, close #4063

* Add new demo snapshot

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`] = `
+<div>
+  <span
+    class="ant-time-picker "
+  >
+    <input
+      class="ant-time-picker-input"
+      placeholder="请选择时间"
+      readonly=""
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-time-picker-icon"
+    />
+  </span>
+  <span
+    class="ant-time-picker "
+  >
+    <input
+      class="ant-time-picker-input"
+      placeholder="请选择时间"
+      readonly=""
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-time-picker-icon"
+    />
+  </span>
+  <span
+    class="ant-time-picker "
+  >
+    <input
+      class="ant-time-picker-input"
+      placeholder="请选择时间"
+      readonly=""
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-time-picker-icon"
+    />
+  </span>
+</div>
+`;
+
 exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `
 <span
   class="ant-time-picker "

components/time-picker/demo/12hours.md

@@ -0,0 +1,30 @@
+---
+order: 7
+title:
+  zh-CN: 12 小时制
+  en-US: 12 hours
+---
+
+## zh-CN
+
+12 小时制的时间选择器，默认的 format 为 `h:mm:ss a`。
+
+## en-US
+
+TimePicker of 12 hours format, with default format `h:mm:ss a`.
+
+````jsx
+import { TimePicker } from 'antd';
+
+function onChange(time, timeString) {
+  console.log(time, timeString);
+}
+
+ReactDOM.render(
+  <div>
+    <TimePicker use12Hours onChange={onChange} />
+    <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} />
+    <TimePicker use12Hours format="h:mm a" onChange={onChange} />
+  </div>
+, mountNode);
+````

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 |
 
 <style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>

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<TimePickerProps, any> {
@@ -81,10 +82,21 @@ abstract class TimePicker extends React.Component<TimePickerProps, any> {
     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<TimePickerProps, any> {
       <RcTimePicker
         {...props}
         ref={this.saveTimePicker}
+        format={format}
         className={className}
         value={this.state.value}
         placeholder={props.placeholder === undefined ? this.getLocale().placeholder : props.placeholder}
-        showHour={props.format.indexOf('HH') > -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}
       />

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 |
 
 <style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>

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;
 

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",