From b34f58e2ec9c7a27e2ac243d53580c2c41ca4eb2 Mon Sep 17 00:00:00 2001
From: MrHeer <hlm52pk@163.com>
Date: Tue, 14 May 2019 23:12:58 +0800
Subject: [PATCH 1/2] feat: Support milliseconds picker column (#149)

---
 README.md               |  9 ++++---
 assets/index/Panel.less |  4 ++++
 examples/disabled.js    |  6 +++++
 examples/format.js      |  1 +
 rc-time-picker.d.ts     | 46 +++++++++++++++++++++++++++++++++++
 src/Combobox.jsx        | 33 ++++++++++++++++++++++++-
 src/Header.jsx          | 20 ++++++++++++----
 src/Panel.jsx           | 30 ++++++++++++++++++++---
 src/TimePicker.jsx      | 53 ++++++++++++++++++++++++++++++++++-------
 9 files changed, 182 insertions(+), 20 deletions(-)
 create mode 100644 rc-time-picker.d.ts

diff --git a/README.md b/README.md
index 1098b6ad..8955ee2d 100644
--- a/README.md
+++ b/README.md
@@ -68,10 +68,12 @@ API
 | showHour                | Boolean                           | true | whether show hour | |
 | showMinute              | Boolean                           | true | whether show minute |
 | showSecond              | Boolean                           | true | whether show second |
+| showMillisecond         | Boolean                           | false | whether show millisecond |
 | format                  | String                            | - | moment format |
 | disabledHours           | Function                          | - | disabled hour options |
 | disabledMinutes         | Function                          | - | disabled minute options |
 | disabledSeconds         | Function                          | - | disabled second options |
+| disabledMilliseconds    | Function                          | - | disabled millisecond options |
 | use12Hours              | Boolean                           | false | 12 hours display mode |
 | hideDisabledOptions     | Boolean                           | false | whether hide disabled options |
 | onChange                | Function                          | null | called when time-picker a different value |
@@ -85,10 +87,11 @@ API
 | hourStep                | Number                            | 1 | interval between hours in picker  |
 | minuteStep              | Number                            | 1 | interval between minutes in picker  |
 | secondStep              | Number                            | 1 | interval between seconds in picker  |
+| millisecondStep         | Number                            | 1 | interval between milliseconds in picker |
 | focusOnOpen             | Boolean                           | false | automatically focus the input when the picker opens |
-| inputReadOnly             | Boolean                           | false | set input to read only |
-| inputIcon             | ReactNode                           |  | specific the time-picker icon. |
-| clearIcon             | ReactNode                           |  | specific the clear icon. |
+| inputReadOnly           | Boolean                           | false | set input to read only |
+| inputIcon               | ReactNode                         |  | specific the select icon. |
+| clearIcon               | ReactNode                         |  | specific the clear icon. |
 
 ## Test Case
 
diff --git a/assets/index/Panel.less b/assets/index/Panel.less
index 68e6c8e7..a46318bf 100644
--- a/assets/index/Panel.less
+++ b/assets/index/Panel.less
@@ -26,4 +26,8 @@
   &-narrow {
     max-width: 113px;
   }
+
+  &-wide {
+    width: 227px;
+  }
 }
diff --git a/examples/disabled.js b/examples/disabled.js
index d7011adb..cbe5c802 100644
--- a/examples/disabled.js
+++ b/examples/disabled.js
@@ -45,6 +45,10 @@ function disabledSeconds(h, m) {
   return [h + (m % 60)];
 }
 
+function disabledMilliseconds() {
+  return [1, 5, 10];
+}
+
 const App = () => (
   <>
     <h3>Disabled picker</h3>
@@ -52,12 +56,14 @@ const App = () => (
     <h3>Disabled options</h3>
     <TimePicker
       showSecond={showSecond}
+      showMillisecond
       defaultValue={now}
       className="xxx"
       onChange={onChange}
       disabledHours={disabledHours}
       disabledMinutes={disabledMinutes}
       disabledSeconds={disabledSeconds}
+      disabledMilliseconds={disabledMilliseconds}
     />
   </>
 );
diff --git a/examples/format.js b/examples/format.js
index 6b6d1126..dffabc54 100644
--- a/examples/format.js
+++ b/examples/format.js
@@ -8,6 +8,7 @@ const App = () => (
     <TimePicker defaultValue={moment()} showHour={false} />
     <TimePicker defaultValue={moment()} showMinute={false} />
     <TimePicker defaultValue={moment()} showSecond={false} />
+    <TimePicker defaultValue={moment()} showMillisecond />
 
     <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
     <TimePicker defaultValue={moment()} showHour={false} showSecond={false} />
diff --git a/rc-time-picker.d.ts b/rc-time-picker.d.ts
new file mode 100644
index 00000000..de02597e
--- /dev/null
+++ b/rc-time-picker.d.ts
@@ -0,0 +1,46 @@
+declare module 'rc-time-picker' {
+  import { Moment } from 'moment';
+  import * as React from 'react';
+
+  type TimePickerProps = {
+    prefixCls?: String;
+    clearText?: String;
+    disabled?: Boolean;
+    allowEmpty?: Boolean;
+    open?: Boolean;
+    defaultValue?: Moment;
+    defaultOpenValue?: Moment;
+    value?: Moment;
+    placeholder?: String;
+    className?: String;
+    id?: String;
+    popupClassName?: String;
+    showHour?: Boolean;
+    showMinute?: Boolean;
+    showSecond?: Boolean;
+    showMillisecond?: Boolean;
+    format?: String;
+    disabledHours?: Function;
+    disabledMinutes?: Function;
+    disabledSeconds?: Function;
+    disabledMilliseconds?: Function;
+    use12Hours?: Boolean;
+    hideDisabledOptions?: Boolean;
+    onChange?: Function;
+    addon?: Function;
+    placement?: String;
+    transitionName?: String;
+    name?: String;
+    onOpen?: Function;
+    onClose?: Function;
+    hourStep?: Number;
+    minuteStep?: Number;
+    secondStep?: Number;
+    millisecondStep?: Number;
+    focusOnOpen?: Boolean;
+    inputReadOnly?: Boolean;
+    inputIcon?: React.ReactNode;
+    clearIcon?: React.ReactNode;
+  };
+  export default class TimePicker extends React.Component<TimePickerProps> {}
+}
diff --git a/src/Combobox.jsx b/src/Combobox.jsx
index 77dc4119..ae36130b 100644
--- a/src/Combobox.jsx
+++ b/src/Combobox.jsx
@@ -56,8 +56,11 @@ class Combobox extends Component {
         }
       }
       onAmPmChange(ampm);
-    } else {
+    } else if (type === 'second') {
       value.second(+itemValue);
+    } else {
+      itemValue += '0';
+      value.millisecond(+itemValue);
     }
     onChange(value);
   };
@@ -154,6 +157,33 @@ class Combobox extends Component {
     );
   }
 
+  getMillisecondSelect(millisecond) {
+    const {
+      prefixCls,
+      millisecondOptions,
+      disabledMilliseconds,
+      showMillisecond,
+      defaultOpenValue,
+      value: propValue,
+    } = this.props;
+    if (!showMillisecond) {
+      return null;
+    }
+    const value = propValue || defaultOpenValue;
+    const disabledOptions = disabledMilliseconds(value.hour(), value.minute(), value.second());
+
+    return (
+      <Select
+        prefixCls={prefixCls}
+        options={millisecondOptions.map(option => formatOption(option, disabledOptions))}
+        selectedIndex={millisecondOptions.indexOf(Math.floor(millisecond / 10))}
+        type="millisecond"
+        onSelect={this.onItemChange}
+        onMouseEnter={() => this.onEnterSelectPanel('millisecond')}
+      />
+    );
+  }
+
   getAMPMSelect() {
     const { prefixCls, use12Hours, format, isAM, onEsc } = this.props;
     if (!use12Hours) {
@@ -187,6 +217,7 @@ class Combobox extends Component {
         {this.getHourSelect(value.hour())}
         {this.getMinuteSelect(value.minute())}
         {this.getSecondSelect(value.second())}
+        {this.getMillisecondSelect(value.millisecond())}
         {this.getAMPMSelect(value.hour())}
       </div>
     );
diff --git a/src/Header.jsx b/src/Header.jsx
index 4932382b..3ea4233f 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -57,9 +57,11 @@ class Header extends Component {
       hourOptions,
       minuteOptions,
       secondOptions,
+      millisecondOptions,
       disabledHours,
       disabledMinutes,
       disabledSeconds,
+      disabledMilliseconds,
       onChange,
     } = this.props;
 
@@ -76,13 +78,15 @@ class Header extends Component {
       value
         .hour(parsed.hour())
         .minute(parsed.minute())
-        .second(parsed.second());
+        .second(parsed.second())
+        .millisecond(parsed.millisecond());
 
       // if time value not allowed, response warning.
       if (
         hourOptions.indexOf(value.hour()) < 0 ||
         minuteOptions.indexOf(value.minute()) < 0 ||
-        secondOptions.indexOf(value.second()) < 0
+        secondOptions.indexOf(value.second()) < 0 ||
+        millisecondOptions.indexOf(value.millisecond()) < 0
       ) {
         this.setState({
           invalid: true,
@@ -94,10 +98,16 @@ class Header extends Component {
       const disabledHourOptions = disabledHours();
       const disabledMinuteOptions = disabledMinutes(value.hour());
       const disabledSecondOptions = disabledSeconds(value.hour(), value.minute());
+      const disabledMillisecondOptions = disabledMilliseconds(
+        value.hour(),
+        value.minute(),
+        value.second(),
+      );
       if (
         (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
         (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
-        (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
+        (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0) ||
+        (disabledMillisecondOptions && disabledMillisecondOptions.indexOf(value.millisecond()) >= 0)
       ) {
         this.setState({
           invalid: true,
@@ -109,13 +119,15 @@ class Header extends Component {
         if (
           originalValue.hour() !== value.hour() ||
           originalValue.minute() !== value.minute() ||
-          originalValue.second() !== value.second()
+          originalValue.second() !== value.second() ||
+          originalValue.millisecond() !== value.millisecond()
         ) {
           // keep other fields for rc-calendar
           const changedValue = originalValue.clone();
           changedValue.hour(value.hour());
           changedValue.minute(value.minute());
           changedValue.second(value.second());
+          changedValue.millisecond(value.millisecond());
           onChange(changedValue);
         }
       } else if (originalValue !== value) {
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 2444b382..79fe10e1 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import Header from './Header';
 import Combobox from './Combobox';
 
-function noop() {}
+function noop() { }
 
 function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1) {
   const arr = [];
@@ -16,7 +16,7 @@ function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1)
   return arr;
 }
 
-function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
+function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions, millisecondOptions) {
   const hour = hourOptions
     .slice()
     .sort((a, b) => Math.abs(time.hour() - a) - Math.abs(time.hour() - b))[0];
@@ -26,7 +26,10 @@ function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
   const second = secondOptions
     .slice()
     .sort((a, b) => Math.abs(time.second() - a) - Math.abs(time.second() - b))[0];
-  return moment(`${hour}:${minute}:${second}`, 'HH:mm:ss');
+  const millisecond = millisecondOptions
+    .slice()
+    .sort((a, b) => Math.abs(time.millisecond() - a) - Math.abs(time.millisecond() - b))[0];
+  return moment(`${hour}:${minute}:${second}:${millisecond}`, 'HH:mm:ss:SS');
 }
 
 class Panel extends Component {
@@ -36,6 +39,7 @@ class Panel extends Component {
     disabledHours: noop,
     disabledMinutes: noop,
     disabledSeconds: noop,
+    disabledMilliseconds: noop,
     defaultOpenValue: moment(),
     use12Hours: false,
     addon: noop,
@@ -104,10 +108,12 @@ class Panel extends Component {
       placeholder,
       disabledMinutes,
       disabledSeconds,
+      disabledMilliseconds,
       hideDisabledOptions,
       showHour,
       showMinute,
       showSecond,
+      showMillisecond,
       format,
       defaultOpenValue,
       clearText,
@@ -119,6 +125,7 @@ class Panel extends Component {
       hourStep,
       minuteStep,
       secondStep,
+      millisecondStep,
       inputReadOnly,
       clearIcon,
     } = this.props;
@@ -129,6 +136,11 @@ class Panel extends Component {
       value ? value.hour() : null,
       value ? value.minute() : null,
     );
+    const disabledMillisecondOptions = disabledMilliseconds(
+      value ? value.hour() : null,
+      value ? value.minute() : null,
+      value ? value.second() : null,
+    );
     const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions, hourStep);
     const minuteOptions = generateOptions(
       60,
@@ -142,12 +154,19 @@ class Panel extends Component {
       hideDisabledOptions,
       secondStep,
     );
+    const millisecondOptions = generateOptions(
+      100,
+      disabledMillisecondOptions,
+      hideDisabledOptions,
+      millisecondStep,
+    );
 
     const validDefaultOpenValue = toNearestValidTime(
       defaultOpenValue,
       hourOptions,
       minuteOptions,
       secondOptions,
+      millisecondOptions,
     );
 
     return (
@@ -164,9 +183,11 @@ class Panel extends Component {
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          millisecondOptions={millisecondOptions}
           disabledHours={this.disabledHours}
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
+          disabledMilliseconds={disabledMilliseconds}
           onChange={this.onChange}
           focusOnOpen={focusOnOpen}
           onKeyDown={onKeyDown}
@@ -183,12 +204,15 @@ class Panel extends Component {
           showHour={showHour}
           showMinute={showMinute}
           showSecond={showSecond}
+          showMillisecond={showMillisecond}
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          millisecondOptions={millisecondOptions}
           disabledHours={this.disabledHours}
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
+          disabledMilliseconds={disabledMilliseconds}
           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
           use12Hours={use12Hours}
           onEsc={onEsc}
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 3cb29ed9..af34b75e 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import Panel from './Panel';
 import placements from './placements';
 
-function noop() {}
+function noop() { }
 
 function refFn(field, component) {
   this[field] = component;
@@ -28,9 +28,11 @@ class Picker extends Component {
     showHour: true,
     showMinute: true,
     showSecond: true,
+    showMillisecond: false,
     disabledHours: noop,
     disabledMinutes: noop,
     disabledSeconds: noop,
+    disabledMilliseconds: noop,
     hideDisabledOptions: false,
     placement: 'bottomLeft',
     onChange: noop,
@@ -66,9 +68,9 @@ class Picker extends Component {
     }
     return Object.keys(newState).length > 0
       ? {
-          ...state,
-          ...newState,
-        }
+        ...state,
+        ...newState,
+      }
       : null;
   }
 
@@ -113,20 +115,30 @@ class Picker extends Component {
   }
 
   getFormat() {
-    const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
+    const { format, showHour, showMinute, showSecond, showMillisecond, use12Hours } = this.props;
     if (format) {
       return format;
     }
 
     if (use12Hours) {
-      const fmtString = [showHour ? 'h' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : '']
+      const fmtString = [
+        showHour ? 'h' : '',
+        showMinute ? 'mm' : '',
+        showSecond ? 'ss' : '',
+        showMillisecond ? 'SS' : '',
+      ]
         .filter(item => !!item)
         .join(':');
 
       return fmtString.concat(' a');
     }
 
-    return [showHour ? 'HH' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : '']
+    return [
+      showHour ? 'HH' : '',
+      showMinute ? 'mm' : '',
+      showSecond ? 'ss' : '',
+      showMillisecond ? 'SS' : '',
+    ]
       .filter(item => !!item)
       .join(':');
   }
@@ -138,11 +150,13 @@ class Picker extends Component {
       disabledHours,
       disabledMinutes,
       disabledSeconds,
+      disabledMilliseconds,
       hideDisabledOptions,
       inputReadOnly,
       showHour,
       showMinute,
       showSecond,
+      showMillisecond,
       defaultOpenValue,
       clearText,
       addon,
@@ -152,6 +166,7 @@ class Picker extends Component {
       hourStep,
       minuteStep,
       secondStep,
+      millisecondStep,
       clearIcon,
     } = this.props;
     const { value } = this.state;
@@ -168,17 +183,20 @@ class Picker extends Component {
         showHour={showHour}
         showMinute={showMinute}
         showSecond={showSecond}
+        showMillisecond={showMillisecond}
         onEsc={this.onEsc}
         format={this.getFormat()}
         placeholder={placeholder}
         disabledHours={disabledHours}
         disabledMinutes={disabledMinutes}
         disabledSeconds={disabledSeconds}
+        disabledMilliseconds={disabledMilliseconds}
         hideDisabledOptions={hideDisabledOptions}
         use12Hours={use12Hours}
         hourStep={hourStep}
         minuteStep={minuteStep}
         secondStep={secondStep}
+        millisecondStep={millisecondStep}
         addon={addon}
         focusOnOpen={focusOnOpen}
         onKeyDown={onKeyDown}
@@ -188,7 +206,15 @@ class Picker extends Component {
   }
 
   getPopupClassName() {
-    const { showHour, showMinute, showSecond, use12Hours, prefixCls, popupClassName } = this.props;
+    const {
+      showHour,
+      showMinute,
+      showSecond,
+      showMillisecond,
+      use12Hours,
+      prefixCls,
+      popupClassName,
+    } = this.props;
     let selectColumnCount = 0;
     if (showHour) {
       selectColumnCount += 1;
@@ -199,14 +225,23 @@ class Picker extends Component {
     if (showSecond) {
       selectColumnCount += 1;
     }
+    if (showMillisecond) {
+      selectColumnCount += 1;
+    }
     if (use12Hours) {
       selectColumnCount += 1;
     }
     // Keep it for old compatibility
+    let showCount = 0;
+    if (showHour) showCount += 1;
+    if (showMinute) showCount += 1;
+    if (showSecond) showCount += 1;
+    if (showMillisecond) showCount += 1;
     return classNames(
       popupClassName,
       {
-        [`${prefixCls}-panel-narrow`]: (!showHour || !showMinute || !showSecond) && !use12Hours,
+        [`${prefixCls}-panel-narrow`]: showCount <= 2 && !use12Hours,
+        [`${prefixCls}-panel-wide`]: showCount === 4 && !use12Hours,
       },
       `${prefixCls}-panel-column-${selectColumnCount}`,
     );

From b871b801c1320d2c515315af45ace897d77f33cc Mon Sep 17 00:00:00 2001
From: MrHeer <hlm52pk@163.com>
Date: Wed, 15 May 2019 21:00:16 +0800
Subject: [PATCH 2/2] add milliseconds test

---
 rc-time-picker.d.ts                          | 46 -------------
 tests/Header.spec.jsx                        |  3 +
 tests/Select.spec.jsx                        | 70 ++++++++++++++------
 tests/TimePicker.spec.jsx                    | 70 +++++++++++++++-----
 tests/__snapshots__/TimePicker.spec.jsx.snap |  4 +-
 5 files changed, 110 insertions(+), 83 deletions(-)
 delete mode 100644 rc-time-picker.d.ts

diff --git a/rc-time-picker.d.ts b/rc-time-picker.d.ts
deleted file mode 100644
index de02597e..00000000
--- a/rc-time-picker.d.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-declare module 'rc-time-picker' {
-  import { Moment } from 'moment';
-  import * as React from 'react';
-
-  type TimePickerProps = {
-    prefixCls?: String;
-    clearText?: String;
-    disabled?: Boolean;
-    allowEmpty?: Boolean;
-    open?: Boolean;
-    defaultValue?: Moment;
-    defaultOpenValue?: Moment;
-    value?: Moment;
-    placeholder?: String;
-    className?: String;
-    id?: String;
-    popupClassName?: String;
-    showHour?: Boolean;
-    showMinute?: Boolean;
-    showSecond?: Boolean;
-    showMillisecond?: Boolean;
-    format?: String;
-    disabledHours?: Function;
-    disabledMinutes?: Function;
-    disabledSeconds?: Function;
-    disabledMilliseconds?: Function;
-    use12Hours?: Boolean;
-    hideDisabledOptions?: Boolean;
-    onChange?: Function;
-    addon?: Function;
-    placement?: String;
-    transitionName?: String;
-    name?: String;
-    onOpen?: Function;
-    onClose?: Function;
-    hourStep?: Number;
-    minuteStep?: Number;
-    secondStep?: Number;
-    millisecondStep?: Number;
-    focusOnOpen?: Boolean;
-    inputReadOnly?: Boolean;
-    inputIcon?: React.ReactNode;
-    clearIcon?: React.ReactNode;
-  };
-  export default class TimePicker extends React.Component<TimePickerProps> {}
-}
diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx
index 00a58d3f..46801b8c 100644
--- a/tests/Header.spec.jsx
+++ b/tests/Header.spec.jsx
@@ -88,6 +88,9 @@ describe('Header', () => {
         disabledSeconds(h, m) {
           return [h + (m % 60)];
         },
+        disabledMilliseconds() {
+          return [15, 25, 35];
+        },
       });
       expect(picker.state().open).toBeFalsy();
       clickInput(picker);
diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx
index eb25614c..af7a102a 100644
--- a/tests/Select.spec.jsx
+++ b/tests/Select.spec.jsx
@@ -9,14 +9,14 @@ describe('Select', () => {
   let container;
 
   function renderPicker(props) {
-    const showSecond = true;
-    const format = 'HH:mm:ss';
+    const showMillisecond = true;
+    const format = 'HH:mm:ss:SS';
 
     return mount(
       <TimePicker
         format={format}
-        showSecond={showSecond}
-        defaultValue={moment('01:02:04', format)}
+        showMillisecond={showMillisecond}
+        defaultValue={moment('01:02:04:05', format)}
         {...props}
       />,
     );
@@ -80,6 +80,7 @@ describe('Select', () => {
         hourStep: 5,
         minuteStep: 15,
         secondStep: 21,
+        millisecondStep: 30,
       });
       clickInput(picker);
 
@@ -88,6 +89,7 @@ describe('Select', () => {
       const hourSelector = selectors.at(0);
       const minuteSelector = selectors.at(1);
       const secondSelector = selectors.at(2);
+      const millisecondSelector = selectors.at(3);
 
       const hours = hourSelector.find('li').map(node => node.text());
       expect(hours).toEqual(['00', '05', '10', '15', '20']);
@@ -97,6 +99,9 @@ describe('Select', () => {
 
       const seconds = secondSelector.find('li').map(node => node.text());
       expect(seconds).toEqual(['00', '21', '42']);
+
+      const milliseconds = millisecondSelector.find('li').map(node => node.text());
+      expect(milliseconds).toEqual(['00', '30', '60', '90']);
     });
   });
 
@@ -108,7 +113,7 @@ describe('Select', () => {
       clickInput(picker);
       expect(picker.state().open).toBeTruthy();
 
-      expect(picker.find('.rc-time-picker-panel-select').length).toBe(3);
+      expect(picker.find('.rc-time-picker-panel-select').length).toBe(4);
     });
   });
 
@@ -123,13 +128,13 @@ describe('Select', () => {
       clickInput(picker);
 
       expect(picker.state().open).toBeTruthy();
-      matchAll(picker, '01:02:04');
+      matchAll(picker, '01:02:04:05');
 
       clickSelectItem(picker, 0, 19);
 
       expect(onChange).toBeCalled();
       expect(onChange.mock.calls[0][0].hour()).toBe(19);
-      matchAll(picker, '19:02:04');
+      matchAll(picker, '19:02:04:05');
       expect(picker.state().open).toBeTruthy();
     });
 
@@ -143,13 +148,13 @@ describe('Select', () => {
       clickInput(picker);
 
       expect(picker.state().open).toBeTruthy();
-      matchAll(picker, '01:02:04');
+      matchAll(picker, '01:02:04:05');
 
       clickSelectItem(picker, 1, 19);
 
       expect(onChange).toBeCalled();
       expect(onChange.mock.calls[0][0].minute()).toBe(19);
-      matchAll(picker, '01:19:04');
+      matchAll(picker, '01:19:04:05');
       expect(picker.state().open).toBeTruthy();
     });
 
@@ -163,13 +168,33 @@ describe('Select', () => {
       clickInput(picker);
 
       expect(picker.state().open).toBeTruthy();
-      matchAll(picker, '01:02:04');
+      matchAll(picker, '01:02:04:05');
 
       clickSelectItem(picker, 2, 19);
 
       expect(onChange).toBeCalled();
       expect(onChange.mock.calls[0][0].second()).toBe(19);
-      matchAll(picker, '01:02:19');
+      matchAll(picker, '01:02:19:05');
+      expect(picker.state().open).toBeTruthy();
+    });
+
+    it('millisecond correctly', async () => {
+      const onChange = jest.fn();
+      const picker = renderPicker({
+        onChange,
+      });
+      expect(picker.state().open).toBeFalsy();
+
+      clickInput(picker);
+
+      expect(picker.state().open).toBeTruthy();
+      matchAll(picker, '01:02:04:05');
+
+      clickSelectItem(picker, 3, 19);
+
+      expect(onChange).toBeCalled();
+      expect(onChange.mock.calls[0][0].millisecond()).toBe(190);
+      matchAll(picker, '01:02:04:19');
       expect(picker.state().open).toBeTruthy();
     });
 
@@ -183,6 +208,7 @@ describe('Select', () => {
           .second(0),
         format: undefined,
         showSecond: false,
+        showMillisecond: false,
         use12Hours: true,
       });
       expect(picker.state().open).toBeFalsy();
@@ -215,25 +241,25 @@ describe('Select', () => {
 
       expect(picker.state().open).toBeTruthy();
 
-      matchAll(picker, '01:02:04');
+      matchAll(picker, '01:02:04:05');
 
       clickSelectItem(picker, 1, 1);
 
       expect(onChange).not.toBeCalled();
-      matchAll(picker, '01:02:04');
+      matchAll(picker, '01:02:04:05');
       expect(picker.state().open).toBeTruthy();
 
       clickSelectItem(picker, 2, 3);
 
       expect(onChange).not.toBeCalled();
-      matchAll(picker, '01:02:04');
+      matchAll(picker, '01:02:04:05');
       expect(picker.state().open).toBeTruthy();
 
       clickSelectItem(picker, 1, 7);
 
       expect(onChange).toBeCalled();
       expect(onChange.mock.calls[0][0].minute()).toBe(7);
-      matchAll(picker, '01:07:04');
+      matchAll(picker, '01:07:04:05');
       expect(picker.state().open).toBeTruthy();
     });
 
@@ -250,13 +276,13 @@ describe('Select', () => {
       clickInput(picker);
       expect(picker.state().open).toBeTruthy();
 
-      matchAll(picker, '01:02:04');
+      matchAll(picker, '01:02:04:05');
 
       clickSelectItem(picker, 0, 3);
 
       expect(onChange).toBeCalled();
       expect(onChange.mock.calls[0][0].hour()).toBe(6);
-      matchAll(picker, '06:02:04');
+      matchAll(picker, '06:02:04:05');
       expect(picker.state().open).toBeTruthy();
       onChange.mockReset();
 
@@ -264,7 +290,7 @@ describe('Select', () => {
 
       expect(onChange).toBeCalled();
       expect(onChange.mock.calls[0][0].hour()).toBe(8);
-      matchAll(picker, '08:02:04');
+      matchAll(picker, '08:02:04:05');
       expect(picker.state().open).toBeTruthy();
     });
   });
@@ -278,6 +304,7 @@ describe('Select', () => {
           .minute(0)
           .second(0),
         showSecond: false,
+        showMillisecond: false,
         format: undefined,
       });
 
@@ -298,6 +325,7 @@ describe('Select', () => {
           .minute(0)
           .second(0),
         showSecond: false,
+        showMillisecond: false,
         format: undefined,
       });
       expect(picker.state().open).toBeFalsy();
@@ -315,6 +343,7 @@ describe('Select', () => {
           .minute(0)
           .second(0),
         showSecond: false,
+        showMillisecond: false,
         format: undefined,
       });
       expect(picker.state().open).toBeFalsy();
@@ -335,6 +364,7 @@ describe('Select', () => {
           .minute(0)
           .second(0),
         showSecond: false,
+        showMillisecond: false,
         format: undefined,
       });
 
@@ -359,6 +389,7 @@ describe('Select', () => {
           .minute(0)
           .second(0),
         showSecond: false,
+        showMillisecond: false,
         format: 'h:mm A',
       });
 
@@ -389,6 +420,7 @@ describe('Select', () => {
           .minute(0)
           .second(0),
         showSecond: false,
+        showMillisecond: false,
       });
 
       expect(picker.state().open).toBeFalsy();
@@ -439,7 +471,7 @@ describe('Select', () => {
         });
 
         const clearButton = findClearFunc(picker);
-        matchValue(picker, '01:02:04');
+        matchValue(picker, '01:02:04:05');
 
         clearButton.simulate('click');
         expect(picker.state().open).toBeFalsy();
diff --git a/tests/TimePicker.spec.jsx b/tests/TimePicker.spec.jsx
index dae9575b..4ad28176 100644
--- a/tests/TimePicker.spec.jsx
+++ b/tests/TimePicker.spec.jsx
@@ -9,29 +9,42 @@ describe('TimePicker', () => {
   let container;
 
   function renderPicker(props, options) {
-    const showSecond = true;
-    const format = 'HH:mm:ss';
+    const showMillisecond = true;
+    const format = 'HH:mm:ss:SS';
 
     return mount(
       <TimePicker
         format={format}
-        showSecond={showSecond}
-        defaultValue={moment('12:57:58', format)}
+        showMillisecond={showMillisecond}
+        defaultValue={moment('12:57:58:65', format)}
         {...props}
       />,
       options,
     );
   }
 
-  function renderPickerWithoutSeconds(props) {
-    const showSecond = false;
-    const format = 'HH:mm';
+  function renderPickerWithoutMilliseconds(props) {
+    const showMillisecond = false;
+    const format = 'HH:mm:ss';
 
     return mount(
       <TimePicker
         format={format}
-        showSecond={showSecond}
-        defaultValue={moment('08:24', format)}
+        showMillisecond={showMillisecond}
+        defaultValue={moment('08:24:32', format)}
+        {...props}
+      />,
+    );
+  }
+
+  function renderPickerWithoutFormat(props) {
+    const showMillisecond = false;
+
+    // eslint-disable-next-line
+    return mount(
+      <TimePicker
+        showMillisecond={showMillisecond}
+        defaultValue={moment('08:24:32', 'HH:mm:ss')}
         {...props}
       />,
     );
@@ -54,7 +67,7 @@ describe('TimePicker', () => {
         onChange,
       });
       expect(picker.state().open).toBeFalsy();
-      matchValue(picker, '12:57:58');
+      matchValue(picker, '12:57:58:65');
       clickInput(picker);
 
       expect(picker.state().open).toBeTruthy();
@@ -64,7 +77,8 @@ describe('TimePicker', () => {
       expect(onChange.mock.calls[0][0].hour()).toBe(1);
       expect(onChange.mock.calls[0][0].minute()).toBe(57);
       expect(onChange.mock.calls[0][0].second()).toBe(58);
-      matchValue(picker, '01:57:58');
+      expect(onChange.mock.calls[0][0].millisecond()).toBe(650);
+      matchValue(picker, '01:57:58:65');
       expect(picker.state().open).toBeTruthy();
     });
 
@@ -113,14 +127,37 @@ describe('TimePicker', () => {
     });
   });
 
-  describe('render panel to body (without seconds)', () => {
+  describe('render panel to body (without milliseconds)', () => {
+    it('popup correctly', async () => {
+      const onChange = jest.fn();
+      const picker = renderPickerWithoutMilliseconds({
+        onChange,
+      });
+      expect(picker.state().open).toBeFalsy();
+      matchValue(picker, '08:24:32');
+      clickInput(picker);
+
+      expect(picker.find('.rc-time-picker-panel-inner').length).toBeTruthy();
+      expect(picker.state().open).toBeTruthy();
+      clickSelectItem(picker, 0, 1);
+
+      expect(onChange).toBeCalled();
+      expect(onChange.mock.calls[0][0].hour()).toBe(1);
+      expect(onChange.mock.calls[0][0].minute()).toBe(24);
+      expect(onChange.mock.calls[0][0].second()).toBe(32);
+      matchValue(picker, '01:24:32');
+      expect(picker.state().open).toBeTruthy();
+    });
+  });
+
+  describe('render panel to body (without format)', () => {
     it('popup correctly', async () => {
       const onChange = jest.fn();
-      const picker = renderPickerWithoutSeconds({
+      const picker = renderPickerWithoutFormat({
         onChange,
       });
       expect(picker.state().open).toBeFalsy();
-      matchValue(picker, '08:24');
+      matchValue(picker, '08:24:32');
       clickInput(picker);
 
       expect(picker.find('.rc-time-picker-panel-inner').length).toBeTruthy();
@@ -130,7 +167,8 @@ describe('TimePicker', () => {
       expect(onChange).toBeCalled();
       expect(onChange.mock.calls[0][0].hour()).toBe(1);
       expect(onChange.mock.calls[0][0].minute()).toBe(24);
-      matchValue(picker, '01:24');
+      expect(onChange.mock.calls[0][0].second()).toBe(32);
+      matchValue(picker, '01:24:32');
       expect(picker.state().open).toBeTruthy();
     });
   });
@@ -138,7 +176,7 @@ describe('TimePicker', () => {
   describe('render panel to body 12pm mode', () => {
     it('popup correctly', async () => {
       const onChange = jest.fn();
-      const picker = renderPickerWithoutSeconds({
+      const picker = renderPickerWithoutMilliseconds({
         use12Hours: true,
         value: null,
         onChange,
diff --git a/tests/__snapshots__/TimePicker.spec.jsx.snap b/tests/__snapshots__/TimePicker.spec.jsx.snap
index 39de565a..ccb987fa 100644
--- a/tests/__snapshots__/TimePicker.spec.jsx.snap
+++ b/tests/__snapshots__/TimePicker.spec.jsx.snap
@@ -8,7 +8,7 @@ exports[`TimePicker allowEmpty cannot allow clear when disabled 1`] = `
     class="rc-time-picker-input"
     disabled=""
     type="text"
-    value="12:57:58"
+    value="12:57:58:65"
   />
   <span
     class="rc-time-picker-icon"
@@ -23,7 +23,7 @@ exports[`TimePicker allowEmpty should allow clear 1`] = `
   <input
     class="rc-time-picker-input"
     type="text"
-    value="12:57:58"
+    value="12:57:58:65"
   />
   <span
     class="rc-time-picker-icon"