React time picker dropdown.
A simple & user-friendly Time picker component for your react app.
Try it out
<TimePicker
defaultValue="10 : 00: 00 am"
placeholder="hh : mm : ss a"
useTwelveHourFormat={true}
showClockIcon={true}
showCloseIcon={true}
allowBackdrop={true}
/>
Installation
Text Copied.
npm i @ashwinthomas/react-time-picker-dropdown
Usage
Learn how to integrate the TimePicker component into your React applications seamlessly!
Text Copied.
importTimePickerfrom"@ashwinthomas/react-time-picker-dropdown";
return(
<TimePicker
defaultValue="10:00:00"
onTimeChange={handleTimeChange}
/>
)
You can import the TimePicker from @ashwinthomas/react-time-picker-dropdown. Currently appearance customizisation using props is limited to clock and close icon visibility, however you can use the timepicker class names to change the default appearance. Time selection using the timepicker component can also be done using a keyboard by making use of the arrowkeys and enter key, and an esc key can be used to close the dropdown.
Props
Prop name | Description | Default value | Example values |
---|---|---|---|
defaultValue | Sets default input value supports formats hh:mm:ss a and hh:mm:ss | null | "10:10:00 am" |
placeholder | Can be used to set input placeholder | "00 : 00 : 00" | "hh : mm : ss" |
useTwelveHourFormat | Use useTwelveHourFormat props to switch between 24 / 12 hour format | false | true |
onTimeChange | Function called when user picks a time. (Returns null if the input value is invalid.) | n/a | (value)=>alert("Time selected is: ", value) |
onInputChange | Function called when picker value changed using the dropdown | n/a | (value)=>alert("Display time changed: ", value) |
showCloseIcon | showCloseIcon can be used to toggle close icon visibility | true | true |
showClockIcon | showClockIcon can be used to toggle clock icon visibility | true | true |
allowBackdrop | allowBackdrop can be used to toggle backdrop | false | false |