react-time-picker-lite

A simple, lightweight React time picker. Requires React 16.8.0 or higher.

• Supports typed input only (no dropdowns).
• Rejects input characters that would create an invalid time sting, and resets if input is not a complete, valid time string when unfocussed.
• Try demo here

Installation

npm install react-time-picker-lite

Basic Example

import React, { useState } from 'react';
import TimePicker from 'react-time-picker-lite';

function App() {
  const [timeMessage, setTimeMessage] = useState(null);
  const [errorMessage, setErrorMessage] = useState(null);
  
  const handleSuccess = (hhmmString) => {
    setTimeMessage(`Time is set to ${hhmmString}.`);
    setErrorMessage(null);
  };

  const handleError = () => {
    setErrorMessage('Please insert a valid time.');
    setTimeMessage(null);
  };

  return (
    <div>
      <TimePicker
        onSuccess={handleSuccess}
        onError={handleError}
      />
      {timeMessage || errorMessage || ''}
    </div>
  );
}

Props

Prop name	Description	Data Type	Default Value
placeholderText	The value to display in the time input before it's facussed	String	'Set Time'
wrapperWidth	The width of the wrapper containing both the input and the AM/PM buttons	String	'120px'
wrapperHeight	The height of the warpper containing both the input and the AM/PM buttons	String	'150px'
inputHeight	The height of the input	String	'30%' (of the wrapper)
inputWidth	The width of the input	String	'100%' (of the wrapper)
inputFontSize	Font size for input text	String	'20px'
backgroundColorOnBlur	Color of input background when blurred	String	'#000' (black)
textColorOnBlur	Color of input text when blurred	String	'#FFF' (white)
backgroundColorOnfocus	Color of input background when focussed	String	'#FFF' (white)
textColorOnfocus	Color of input text when focussed	String	'#000' (black)
font	Font to be applied to input and AM/PM button text	String	'inherit'
amPmButtonHeight	Height of AM/PM button	String	'25%' (of the wrapper)
amPmButtonWidth	Width of AM/PM button	String	'25%' (of the wrapper)
amPmButtonFontSize	Font size for the AM/PM button text	String	'10px'
amPmButtonHighlightedBackgroundColor	Color of AM/PM button background when selected	String	'#000' (black)
amPmButtonNonHighlightedBackgroundColor	Color of AM/PM button background when unselected	String	'#FFF' (white)
amPmButtonHighlightedTextColor	Color of AM/PM button text when selected	String	'#FFF' (white)
amPmButtonNonHighlightedTextColor	Color of AM/PM button text when unselected	String	'#000' (black)
onError	Function that is called when input is reset due to invalid time value	Function	() => null
onSuccess	Function that is called when input is unfocussed with valid time value. Includes 'HH:mm' (in 24-hour format) as argument	Function	() => null
shouldUse24HourMode	Allows input to use 24 hour time (hides AM/PM buttons if set to true)	Boolean	false