From 92bf059d722b822c4d6e34b15e97a483ac01a4b1 Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Fri, 28 Jun 2024 01:30:47 +0530
Subject: [PATCH] fix: use two digit hour and minute in timepicker

affects: @medly-components/core, @medly-components/forms
---
 .../core/src/components/TimePicker/TimePicker.stories.mdx  | 7 ++++---
 .../TimePicker/TimePickerTextField/TimePickerTextField.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/TimePicker/TimePicker.stories.mdx b/packages/core/src/components/TimePicker/TimePicker.stories.mdx
index f5c82a2e5..241745d56 100644
--- a/packages/core/src/components/TimePicker/TimePicker.stories.mdx
+++ b/packages/core/src/components/TimePicker/TimePicker.stories.mdx
@@ -1,9 +1,9 @@
-import { TimePicker } from './TimePicker';
-import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
 import { boolean, select, text } from '@storybook/addon-knobs';
+import { useState } from 'react';
 import { placements } from '../Popover/Popover.stories.tsx';
+import { TimePicker } from './TimePicker';
 import { variants } from './TimePicker.stories';
-import { useState } from 'react';
 
 <Meta
     title="Core"
@@ -34,6 +34,7 @@ const Component = () => {
     <Story name="TimePicker">
         {() => {
             const [time, setTime] = useState('');
+            console.log(time);
             return (
                 <TimePicker
                     id="dob"
diff --git a/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx b/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx
index 892ab4ebd..de6795121 100644
--- a/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx
+++ b/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx
@@ -49,7 +49,7 @@ const Component: FC<TimePickerTextFieldProps> = memo(
                 if (length >= 7 && match) {
                     const [, hour, minutes] = match;
                     if (hour > '00' && hour <= '12' && minutes >= '00' && minutes <= '59') {
-                        props.onChange?.(`${Number(hour) % 12}:${minutes}`);
+                        props.onChange?.(`${`0${Number(hour) % 12}`.slice(-2)}:${minutes}`);
                         setText(`${`0${hour}`.slice(-2)} : ${`0${minutes}`.slice(-2)}  AM`);
                         setKey(key => key + 1);
                     }
@@ -75,7 +75,9 @@ const Component: FC<TimePickerTextFieldProps> = memo(
                         (period.toUpperCase() === 'AM' || period.toUpperCase() === 'PM')
                     ) {
                         props.onChange?.(
-                            period.toUpperCase() === 'AM' ? `${Number(hour) % 12}:${minutes}` : `${(Number(hour) % 12) + 12}:${minutes}`
+                            period.toUpperCase() === 'AM'
+                                ? `${`0${Number(hour) % 12}`.slice(-2)}:${minutes}`
+                                : `${(Number(hour) % 12) + 12}:${minutes}`
                         );
                     } else {
                         props.onChange?.('');