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

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

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

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

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

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	(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	—
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.