Allowed for multiple time formats in the header time input

README.md

@@ -69,6 +69,7 @@ API
 | showMinute              | Boolean                           | true | whether show minute |
 | showSecond              | Boolean                           | true | whether show second |
 | format                  | String                            | - | moment format |
+| validFormats            | Array of string                   | - | alternative moment formats that the user can enter: use this to support 1pm, 12:30, in addition to the default format |
 | disabledHours           | Function                          | - | disabled hour options |
 | disabledMinutes         | Function                          | - | disabled minute options |
 | disabledSeconds         | Function                          | - | disabled second options |

index.d.ts

@@ -21,6 +21,7 @@ declare module "rc-time-picker" {
     showMinute?: boolean;
     showSecond?: boolean;
     format?: string;
+    validFormats?: string[];
     disabledHours?: () => number[];
     disabledMinutes?: (hour: number) => number[];
     disabledSeconds?: (hour: number, minute: number) => number[];

src/Header.jsx

@@ -47,13 +47,14 @@ class Header extends Component {
     }
   }
 
-  onInputChange = event => {
+  onInputChange = (event) => {
     const str = event.target.value;
     this.setState({
       str,
     });
     const {
-      format,
+      format: propFormat,
+      validFormats,
       hourOptions,
       minuteOptions,
       secondOptions,
@@ -66,17 +67,29 @@ class Header extends Component {
     if (str) {
       const { value: originalValue } = this.props;
       const value = this.getProtoValue().clone();
+
+      const format =
+        validFormats?.find((format) => {
+          const result = moment(str, format, true).isValid();
+          return result;
+        }) || propFormat;
+
+      if (!format) {
+        this.setState({
+          invalid: true,
+        });
+
+        return;
+      }
+
       const parsed = moment(str, format, true);
       if (!parsed.isValid()) {
         this.setState({
           invalid: true,
         });
         return;
       }
-      value
-        .hour(parsed.hour())
-        .minute(parsed.minute())
-        .second(parsed.second());
+      value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second());
 
       // if time value not allowed, response warning.
       if (
@@ -130,7 +143,7 @@ class Header extends Component {
     });
   };
 
-  onKeyDown = e => {
+  onKeyDown = (e) => {
     const { onEsc, onKeyDown } = this.props;
     if (e.keyCode === 27) {
       onEsc();
@@ -151,7 +164,7 @@ class Header extends Component {
     return (
       <input
         className={classNames(`${prefixCls}-input`, invalidClass)}
-        ref={ref => {
+        ref={(ref) => {
           this.refInput = ref;
         }}
         onKeyDown={this.onKeyDown}

src/Panel.jsx

@@ -109,6 +109,7 @@ class Panel extends Component {
       showMinute,
       showSecond,
       format,
+      validFormats,
       defaultOpenValue,
       clearText,
       onEsc,
@@ -160,6 +161,7 @@ class Panel extends Component {
           currentSelectPanel={currentSelectPanel}
           onEsc={onEsc}
           format={format}
+          validFormats={validFormats}
           placeholder={placeholder}
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}

src/TimePicker.jsx

@@ -153,6 +153,7 @@ class Picker extends Component {
       minuteStep,
       secondStep,
       clearIcon,
+      validFormats,
     } = this.props;
     const { value } = this.state;
     return (
@@ -183,6 +184,7 @@ class Picker extends Component {
         focusOnOpen={focusOnOpen}
         onKeyDown={onKeyDown}
         clearIcon={clearIcon}
+        validFormats={validFormats}
       />
     );
   }