From 9e5fcb010e72758eebe0e44887bd09ca1d17da2f Mon Sep 17 00:00:00 2001
From: Harry Yu <hy.harry.yu@gmail.com>
Date: Wed, 24 Nov 2021 14:11:21 -0800
Subject: [PATCH] Allowed for multiple time formats

---
 README.md          |  1 +
 index.d.ts         |  1 +
 src/Header.jsx     | 29 +++++++++++++++++++++--------
 src/Panel.jsx      |  2 ++
 src/TimePicker.jsx |  2 ++
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 1098b6ad..09975fb6 100644
--- a/README.md
+++ b/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 |
diff --git a/index.d.ts b/index.d.ts
index 101a6eec..3a314d23 100644
--- a/index.d.ts
+++ b/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[];
diff --git a/src/Header.jsx b/src/Header.jsx
index 4932382b..15d1c12c 100644
--- a/src/Header.jsx
+++ b/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,6 +67,21 @@ 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({
@@ -73,10 +89,7 @@ class Header extends Component {
         });
         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}
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 2444b382..e4cf2998 100644
--- a/src/Panel.jsx
+++ b/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}
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 3cb29ed9..c079de91 100644
--- a/src/TimePicker.jsx
+++ b/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}
       />
     );
   }