React Simple Am Pm Time Field

Simple React time input field with 12/24 hour support.

!image
!image

Demo available here

Installation

``bash
npm i react-simple-am-pm-time-field
`

Usage

`ts
import TimeField from 'react-simple-am-pm-time-field';
import React, { useEffect, useState, useRef } from 'react';

const inputRef = useRef(null);
const [value, setValue] = useState('');

const handleChange = (text: string) => {
setValue(text);
};

useEffect(() => {
console.log(value);
}, [value]);

const amPmNames = {
am: 'AM',
pm: 'PM',
};

return (
ref={inputRef}
value={value}
onChange={handleChange}
isHour12={false}
amPmNames={amPmNames}
colon=":"
/>
);
`

Properties

$3

- ref :

- type : RefObject
- optional

- className :

- type : string
- optional

- id :

- type : string
- optional

- placeHolder :

- type : string
- optional

- title :

- type : string
- optional

- style :

- type : CSS Properties
- optional

$3

- value :

- type : string
- require
- description : time text
- format
- hh:mm:ss tt
- HH:mm:ss
- hh.mm.ss tt
- HH.mm.ss

- onChange :

- type : function
- requires
- description : handler for updating value

- isHour12 :

- type : boolean
- optional
- description : indicator whether time format is 12 or 24 hour.
- default: false

- colon:

- type : :, .
- optional
- description: separator between numbers
- default: :

- amPmNames:
- type : object
- optional
- description : names for am/pm.
- default : { am: 'AM', pm: 'PM }`

License

MIT License.