š React hook for formatting string to 12- or 24-hour time.
npm install @meecrobe/react-time-hookš React hook for formatting string to 12- or 24-hour time.
!Demo
``bash`
$ yarn add @meecrobe/react-time-hook
`typescript
import { useCallback, useState } from 'react';
import { useTime } from '@meecrobe/react-time-hook';
function TimeInput() {
const [value, setValue] = useState('');
const time = useTime(value);
const handleChange = React.useCallback((e) => {
setValue(e.target.value);
}, []);
const handleBlur = React.useCallback(() => {
setValue(time);
}, [time]);
return (
value={value}
onChange={handleChange}
onBlur={handleBlur}
/>
);
}
`
| Prop | Type | Description |
| ------------ | -------------- | ------------------------------------------- |
| initialValue | string | Initial value |'12' \| '24'
| format | | Time format |boolean
| padZero | | Add leading zero to hours in 12-hour format |
To 12-hour time format (without leading zeros)
| Input | Output |
| ---------- | ------------- |
| '' | '12:00 AM' |'0'
| | '12:00 AM' |'1'
| | '1:00 AM' |'10'
| | '10:00 AM' |'12'
| | '12:00 PM' |'13'
| | '1:00 PM' |'24'
| | '12:00 AM' |'99'
| | '12:00 AM' |'345'
| | '3:45 AM' |'1334'
| | '1:34 PM' |'5889'
| | '12:00 AM' |'1:4'
| | '1:04 AM' |'11:4'
| | '11:04 AM' |'26:09'
| | '12:09 AM' |'12:20'
| | '12:20 PM' |'2000'
| | '8:00 PM' |'3p'
| | '3:00 PM |'8:21p'
| | '8:21 PM' |'821p'
| | '8:21 PM' |'1201am'
| | '12:01 AM' |'3:'
| | '3:00 AM' |
To 24-hour time format
| Input | Output |
| ------------ | --------- |
| '1' | '01:00' |'10'
| | '10:00' |'111'
| | '01:11' |'153'
| | '01:53' |'1820'
| | '18:20' |'2400'
| | '00:00' |'1:4'
| | '01:04' |'11:4'
| | '11:04' |'2244'
| | '22:44' |'3p'
| | '15:00' |'8:21am'
| | '08:21' |'8:21p'
| | '20:21' |'821p'
| | '20:21' |'3p'
| | '15:00' |'8:21p'
| | '20:21' |'03:55 AM'
| | '03:55' |'03:55 PM'
| | '15:55' |'12:01 AM'
| | '00:01' |'1201a'
| | '00:01' |'00:55'
| | '00:55' |'66:66'
| | '00:00' |'22:'
| | '22:00'` |