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 [email protected]

Authors

• @Arslan Ahmed