fix: use two digit hour and minute in timepicker

affects: @medly-components/core, @medly-components/forms
medly · Jun 27, 2024 · 92bf059 · 92bf059
1 parent 09c5bac
commit 92bf059
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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?.('');