The TimeInput component accepts numeric time values in hours and minutes.
Importing the TimeInput Component
To use the TimeInput component in our app, we need to import it from our styled components. Here’s how we can import it:
import { TimeInput } from "StyledComponents";
Using the TimeInput Component
The TimeInput component can be used with various props to control its appearance. Here are some examples of how we can use it:
<TimeInput
className="h-8 w-20 rounded-sm bg-muted p-1 text-sm
onTimeChange={() => ()}
/><TimeInput
className="h-8 w-20 rounded-sm bg-muted p-1 text-sm placeholder:text-muted-foreground"
initTime={duration}
name="timeInput"
onTimeChange={handleDurationChange}
/>TimeInput Component Props
| Name | Description | Default Value |
|---|---|---|
initTime | Provide the initial time value for the input string | "" |
disabled | To set input as disabled bool | false |
onTimeChange | To specify the action to be triggered on changing of the input value func | - |
placeholder | Provide the input placeholder value string | "HH:MM" |
className | To provide external classnames to input string | "" |
name | Provide the name for the input string | "" |