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} /> ) }

function timepickerfn() {
    const [time, setTime] = useState('23:44');
    const onChange = (inputValue) => {
      setTime(inputValue);
    }
    return (
      <Timepicker 
        value={time}
        onChange={onChange}
        onClick={onChange}
      />
   )
}

Result

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 /> ) }

function timepickerfn() {
    const [time, setTime] = useState('10:54');
    const onChange = (inputValue) => {
      setTime(inputValue);
    }
    return (
      <Timepicker 
        value={time}
        onChange={onChange}
        onClick={onChange}
        disabled
      />
   )
}

Result

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} /> ) }

function timepickerfn() {
    const [time, setTime] = useState('10:5');
    const onChange = (inputValue) => {
      setTime(inputValue);
    }
    return (
      <Timepicker 
        value={time}
        onChange={onChange}
        onClick={onChange}
      />
   )
}

Result

Invalid Time Format

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} /> ) }

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

Select Time

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')} /> </> ) }

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

Start time

End time

Props

Name	Type	Default
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.