Timepicker
Example
Live Editor
function timepickerfn() { const [time, setTime] = useState('23:44'); const onChange = (inputValue) => { setTime(inputValue); } return ( <Timepicker value={time} onChange={onChange} onClick={onChange} /> ) }
Result
Loading...
Disabled
Live Editor
function timepickerfn() { const [time, setTime] = useState('10:54'); const onChange = (inputValue) => { setTime(inputValue); } return ( <Timepicker value={time} onChange={onChange} onClick={onChange} disabled /> ) }
Result
Loading...
Invalid input
Live Editor
function timepickerfn() { const [time, setTime] = useState('10:5'); const onChange = (inputValue) => { setTime(inputValue); } return ( <Timepicker value={time} onChange={onChange} onClick={onChange} /> ) }
Result
Loading...
Label
You can include a label to let users know what the time is for.
Live Editor
function timepickerfn() { const [time, setTime] = useState('10:50'); const onChange = (inputValue) => { setTime(inputValue); } return ( <Timepicker label='Select Time' value={time} onChange={onChange} onClick={onChange} /> ) }
Result
Loading...
Working example of Start and End Time
Here you can see the example of how to use the component for start and end time.
Live Editor
function timepickerfn() { const [startTime, setStartTime] = useState('12:00'); const [endTime, setEndTime] = useState('16:00'); const onChange = (inputValue, type) => { type === 'start' ? setStartTime(inputValue) : setEndTime(inputValue); } return ( <> <Timepicker label="Start time" value={startTime} onChange={(value) => onChange(value, 'start')} onClick={(value) => onChange(value, 'start')} /> <Timepicker label="End time" value={endTime} onChange={(value) => onChange(value, 'end')} onClick={(value) => onChange(value, 'end')} /> </> ) }
Result
Loading...
Props
Name | Type | Default |
---|---|---|
onClick * onClick function for time dropdown |
| — |
onChange * onClick function for time dropdown |
| — |
value * |
| — |
label |
| — |
style |
| — |
disabled Boolean disabled value |
| — |
invalidText string value for invalid time |
| — |
dataTestId data-testid for timepicker |
| "timepicker" |
css Add custom styles to this component. Use with caution. Learn more here: Link |
| — |
inputFieldCss |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |