Simple React time input field with 12/24 hour support.
Demo available here
npm i react-simple-am-pm-time-field
import TimeField from 'react-simple-am-pm-time-field';
import React, { useEffect, useState, useRef } from 'react';
const inputRef = useRef<HTMLInputElement>(null);
const [value, setValue] = useState('');
const handleChange = (text: string) => {
setValue(text);
};
useEffect(() => {
console.log(value);
}, [value]);
const amPmNames = {
am: 'AM',
pm: 'PM',
};
return (
<TimeField
ref={inputRef}
value={value}
onChange={handleChange}
isHour12={false}
amPmNames={amPmNames}
colon=":"
/>
);
-
ref :
- type :
RefObject<HTMLInputElement>
- optional
- type :
-
className :
- type :
string
- optional
- type :
-
id :
- type :
string
- optional
- type :
-
placeHolder :
- type :
string
- optional
- type :
-
title :
- type :
string
- optional
- type :
-
style :
- type :
CSS Properties
- optional
- type :
-
value :
- type :
string
- require
- description : time text
- format
hh:mm:ss tt
HH:mm:ss
hh.mm.ss tt
HH.mm.ss
- type :
-
onChange :
- type :
function
- requires
- description : handler for updating value
- type :
-
isHour12 :
- type :
boolean
- optional
- description : indicator whether time format is 12 or 24 hour.
- default:
false
- type :
-
colon:
- type :
:
,.
- optional
- description: separator between numbers
- default:
:
- type :
-
amPmNames:
- type :
object
- optional
- description : names for am/pm.
- default :
{ am: 'AM', pm: 'PM }
- type :
MIT License.