Skip to main content

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

NameTypeDefault
onClick *
onClick function for time dropdown
(time: string) => void
onChange *
onClick function for time dropdown
(inputValue: string) => void
value *
string
label
string
style
CSSProperties
disabled
Boolean disabled value
boolean
invalidText
string value for invalid time
string
dataTestId
data-testid for timepicker
string
"timepicker"
css
Add custom styles to this component. Use with caution. Learn more here: Link
SupportedStyleAttributes
inputFieldCss
SupportedStyleAttributes
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
* - the prop is required.