react-input-timepicker

A lighweight but complete react timepicker which support both 12 and 24 hr format. It is the clone of MD Bootstrap timepicker which is the pro version of mdbootstrap

Installation

Install react-input-timepicker with npm

  npm i react-input-timepicker

Features

This project have following :

• Responsive
• when double click on hour and minute then you can enter your own hour and minute
• show error if entered wrong time
• 12 and 24 hr format

Usage/Examples

import React, { useState } from 'react'
import TimePicker from 'react-input-timepicker'
export default function App() {
  const [time, setTime] = useState('10:00 AM')
  const changeTime = (time) => {
    setTime(time)
  }
  return (
    <div>
      <TimePicker
        size="XS"
        time={time}
        changeTime={changeTime}
        timeFormat={12}
      />
    </div>
  )
}

Properties

Property	type	Default	options	Description
timeFormat	number	12	12 or 24	change time format 12 hours or 24hours
time	string	12:00 AM		NOTE: if you set timeFormat to 12 then you should give time in this form ("10:00 PM" or "05:43 AM") and if you set timeFormat to 24 then you should give time in this form ("23:00" or "18:21" or "05:34")
changeTime	function			it is a callback function when the time changes and it is a valid time it will return time in string
size	string	"XS"	"XS", "S", "M", "L"	this prop will change the height and css of time picker

Demo

react-input-timepicker

Hi, I'm Arslan Ahmed Shaad! 👋

🚀 About Me

I'm a full stack developer...

Feedback

If you have any feedback, please reach out to us at [e-mail]

Authors

• @Arslan Ahmed