/react-simple-am-pm-timefield

Primary LanguageTypeScriptMIT LicenseMIT

React Simple Am Pm Time Field

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

image image

Demo available here

Installation

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

Usage

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=":"
  />
);

Properties

Basic Input Properties

  • ref :

    • type : RefObject<HTMLInputElement>
    • optional

  • className :

    • type : string
    • optional

  • id :

    • type : string
    • optional

  • placeHolder :

    • type : string
    • optional

  • title :

    • type : string
    • optional

  • style :

    • type : CSS Properties
    • optional

Component Properties

  • 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.