Issues with time selector in 12 hour formatting

[vincentvella]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-paper-dates@0.9.2 for the project I'm working on.

Looks like there were some issues with 12 hour formatting in the date picker. Took the liberty of drafting up a patch to handle the various edge-cases I ran into.

• Defaulted to PM when initial time is in AM and selected another AM time
• There's no 00 hour in 12 hour formatting

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-paper-dates/src/Time/AnalogClock.tsx b/node_modules/react-native-paper-dates/src/Time/AnalogClock.tsx
index cf54a48..504ceff 100644
--- a/node_modules/react-native-paper-dates/src/Time/AnalogClock.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/AnalogClock.tsx
@@ -63,7 +63,7 @@ function AnalogClock({
         let previousHourType = getHourType(hoursRef.current)
         let pickedHours = getHours(angle, previousHourType)

-        let hours12AndPm = !hours24 && modeRef.current === 'AM'
+        let hours12AndPm = !hours24 && modeRef.current === 'PM'

         let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)
         let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm
diff --git a/node_modules/react-native-paper-dates/src/Time/AnalogClockHours.tsx b/node_modules/react-native-paper-dates/src/Time/AnalogClockHours.tsx
index 2e29068..9ad35cc 100644
--- a/node_modules/react-native-paper-dates/src/Time/AnalogClockHours.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/AnalogClockHours.tsx
@@ -34,7 +34,7 @@ function AnalogClockHours({
           <View style={styles.outerHourInner}>
             {/* Display 00 instead of 12 for AM hours */}
             <Text style={hours === i + 1 ? { color } : null} selectable={false}>
-              {mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1}
+            {mode === 'AM' && is24Hour && i + 1 === 12 ? '00' : i + 1}
             </Text>
           </View>
         </View>
diff --git a/node_modules/react-native-paper-dates/src/Time/timeUtils.ts b/node_modules/react-native-paper-dates/src/Time/timeUtils.ts
index 2c0200e..9be187d 100644
--- a/node_modules/react-native-paper-dates/src/Time/timeUtils.ts
+++ b/node_modules/react-native-paper-dates/src/Time/timeUtils.ts
@@ -209,15 +209,18 @@ export function useInputColors(highlighted: boolean) {
 }

 export function toHourInputFormat(hours: number, is24Hour: boolean): number {
-  if (hours === 24) {
-    return 0
-  }
   if (is24Hour) {
+    if (hours === 24) {
+      return 0
+    }
     return hours
   }
   if (hours > 12) {
     return hours - 12
   }
+  if (hours === 0) {
+    return hours + 12
+  }
   return hours
 }

@@ -229,7 +232,7 @@ export function toHourOutputFormat(
   if (is24Hour) {
     return newHours
   }
-  if (previousHours > 12 && newHours < 12) {
+  if (!is24Hour && previousHours === 0 || newHours === 0) {
     return newHours + 12
   }
   return newHours

This issue body was partially generated by patch-package.

[willnix86]

+1 for solving this!! (also, thanks for the patch-package hint!)

[RichardLindhout]

Can you make a PR for this?

[iM-GeeKy]

PR here. This also fixes an issue described here.

[iM-GeeKy]

Closed by https://github.com/web-ridge/react-native-paper-dates/pull/230