React Time-Picker

Time picker allows users to select any one time.

Time Picker allows the users to select a single time (in an hour or a minute format). The filled circle is indicating the selected time at the end of the clock.

Time picker for the React application.

It supports any language virtually.
Just install npm to execute the add react-time-pickeror yarn add react-time-picker operator.
Then, Import it by adding the TimePicker from ‘react-time-picker’.
We can use it by adding <Time Picker />

Note: React-time-picker will use better with react-date-picker or react-date time-picker.

Getting Started

The project uses the React 16.3 or later version. If we use an older version of React, then refer to the below given table to find the appropriate react-time-picker version.

React Version	Latest compatible react-time-picker version
16.3	latest
16.0	3. x

Legacy browser

If we want to support older browsers which are Internet Explorer 10, then we will need to use Intl.js or Intl polyfill with React-Date-Picker.

Installation Process:

Firstly, Add the react-time-picker to the project by executing the npm install react-time-picke and yarn add react-time-picker.

Example 1:

  import react from ‘react’; {useState};  import timepicker from ‘react-time-picker’;  function MyApp() {      const [value, onChange] = useState(’10:00′);      return (        <div>          <timepicker onchange={onchange} value={value} />        </div>      );  };  

Custom Style

We import the react time picker without importing the Time Picker from the ‘react-time-picker/dist/entry.nostyle‘ if we use the default react time picker then it will not work.

The styles loaded by the default input file are React-time-picker/dist/TimePicker.css and React-clock/dist/Clock.css.

You need to copy it into the project to build it.

User guide

It displays the input field with the custom input, native input, and a clock.

Property:

Prop name	Description	Default value	Example values
amPmAriaLabel	aria-label is mainly used in AM/PM selection in amPmAriaLabel.	N/A	“Select AM/PM”
className	Class name(s) is added with “react-time-picker” to the parent React-Time-Picker <div> element.	N/A	String: “class1 class2” Array of strings: [“class4”, “class5 class6”]
autoFocus	autoFocus focuses at the input part.	n/a	true
clearAriaLabel	cleararia-label is used for the delete button.	n/a	“Clear value”
clockAriaLabel	aria-label is used for the clock button.	n/a	“Toggle clock”
clearIcon	It is the Delete button content. which will setting the value of null will hide the icon.	(default icon)	String: “Clear” React element: <ClearIcon />
clockClassName	Class name is used to added with “react-clock” to the parent React-Clock <time> with the element.	n/a	String: “class1 class2” Array of strings: [“classA”, “classB classc”]
clockIcon	It is used in Clock content button. The value to null can hide the icon.	(default icon)	String: “Clock” React element: <ClockIcon />
disabled	The time selector will be disabled.	false	true
closeClock	It will close the watch on the value selection.	true	false
disableClock	When set to true, it removes the clock and button by toggling the visibility.	false	true
hourAriaLabel	It is the area-label for the input time.	n/a	“Hour”
format	It supports the Input format based on the Unicode Technical Standard. The values which are supported is: hh, m, mm, s, ss, a, H, HH, h.	n/a	“h:m:s a”
hourPlaceholder	The placeholder for the time entry.	“–“	“hh”
isOpen	Used to open the watch features.	false	true
locale	It is the IETF language tag.	User’s browser settings	“hu-HU”
minuteAriaLabel	minuteAria-label is used for minutes input.	n/a	“Minute”
maxDetail	It can be “hour”, “minute” or “second”. The detailed selection will be used here.	“minute”	“second”
maxTime	The user can select the maximum time here.	n/a	Date: new Date() String: “23:11:00”
minTime	The user can select the minimum time here.	n/a	Date: new Date() String: “12:18:00”
nativeInputAriaLabel	nativeAria-label is a native time input.	n/a	“Time”
onChange	It is called where the user choosing a valid time.	n/a	(value) => alert(‘New time is: ‘, value)
onClockOpen	When the watch is opened, onClockOpen is used.	n/a	() => alert(‘Clock opened’)
onClockClose	When the clock closes it works.	n/a	() => alert(‘Clock closed’)
required	If the entry of the date is req.	false	true
secondAriaLabel	secondAria-label is used in the second input.	n/a	“Second”
openClockOnFocus	Used to open the clock in input focus.	true	false
secondPlaceholder	Second placeholder is mainly used in the second entry.	“–“	“ss”
value	It is just Input value what we used.	n/a	Date: new Date() String: “20:11:00”

Clock:

The time picker component will passes the props of react-clock, except the classname which is used in the clockClassName.

Types of Time Pickers

Various types of time selectors which are dropdown, scroll, and wheel. The UI design of the time picker helps us determine the type you use in React.

1. Dropdown

The dropdown time picker is the easiest time pickers and generallyused to select the hour and minute at the dropdown format. It is not as inherent as other time pickers, but it is better than a traditional text box because it let us select options instead of letting the user text on own own. It helps clear the confusion at the needed format.

Image courtesy of Clue Mediator

2. Displacement

When we use the scroll selector as the name suggests,, the user will scrolls to select the needed date or time infor.

Image courtesy of Hossein

Wheel

The wheel time selector simulates a real clock and makes it easier for the customer to select the exact time.

It asking about the time or intuitively changes where the numbers at the wheel immediately selects the next minutes. We can change the minute value in many ways depending at the implementation.

Some wheel time selectors display the numeric digits (as, hours or minutes) after selecting them, and have some buttons we can select. The buttons are simple arrows that allow s to toggle between the hours and minutes clock arrow.

Image courtesy of Vonovak

Implementation of the time picker

Now that we know that how useful time pickers is, you will learn that how to create it with the help of React. This tutorial focuses on a time picker with a Material-UI, as it is the most popular React library on the GitHub.

We have to download and install Node.js and npm in the system before we start.

Create the app

We need to build your React app in the same place where we eventually build our time picker to get started. Run the below command in the CMD:

This command generates React app with the below files:

Installing Libraries

We need to install two libraries before using the time picker in our Material-U: First is the Material-UI library and second is the library that will handle our dates.

Many developers use Moment.js because it is easy to use; however, the package size of date-fns is four times smaller (19.5 kB) than that of Moment.js (71.9 kB), making date-fns a faster option.

To install the libraries, we have to use npm, which is the default package for the React app.

Start to change the directory of the current project (which is installed previously) with the command cd time-picker.

Lastly, install the Material-UI and date-fns libraries here:

cd time selector

  npm install @date-io/date-fns date-fns @mui/material @mui/lab @emotion/react @emotion/styled  

Create Time Picker

Now, we are going to build a time picker. You have many options to choose in the Material-UI library:

Desktop date: It selects dates with the suitable user interface for our desktop
Date mobile: It selects dates with the suitable user interface of mobile devices
Time: It is a selector used mainly for time
Date and time: It is the selector which has built-in date and time capabilities here.

Now take a look at every option in action:

  import * as React from ‘react’;  import stack from ‘@mui/material/Stack’;  import AdapterDateFns from ‘@mui/lab/AdapterDateFns’;  import LocalizationProvider from ‘@mui/lab/LocalizationProvider’;  import DateTimePicker from ‘@mui/lab/DateTimePicker’;  import TimePicker from ‘@mui/lab/TimePicker’;  import DesktopDatePicker from ‘@mui/lab/DesktopDatePicker’;  import TextField from ‘@mui/material/TextField’;  import MobileDatePicker from ‘@mui/lab/MobileDatePicker’;  

In this code, we import the required libraries. It includes React and many time pickers Like: (DateTimePicker, DesktopDatePicker, TimePicker, and MobileDatePicker) from the Material-UI library.

The code will include the adapter for the date-fns (AdapterDateFns) which handles dates and import format which help structure the page.

  export default function App() {    const [value, setValue] = React.useState (newDate(‘2014-08-18T21:11:54’));    const handleChange = (newValue)   =>   {      setValue(newValue);    };  

Here, we define the app component and export it by using the app’s default export function. You can define it without export default and export it by using the export default apps; however, the solution is the simplest option.

We need to keep track of the date and store a new value every time it is changed after exporting the component. If you don’t track the changes, the date and time will not update when you select a new time. In the above code, the useState () hook initializes the date (2014-08-18T21:11:54), and handleChange function will handle the changes.

Now we want JSX, the React extension to the JavaScript language syntax, to create a realtime selector here:

  return (      <div style={{margin: “5% 40%”}}>        <LocalizationProvider dateAdapter={AdapterDateFns}>          <Stackspace={3}>            <DesktopDatePicker              label=”Desk Date”              inputFormat=”MM/dd/yyyy”              value={value}              onChange={handleChange}              renderInput={(parameters) => <TextField {…parameters} />}            />            <MobileDatePicker              label=”Movable Date”              inputFormat=”mm/dd/yyyy”              value={value}              onChange={handleChange}              renderInput={(parameters) => <TextField {…parameters} />}            />            <time picker              label = “Time”              value={value}              onChange={handleChange}              renderInput={(parameters) => <TextField {…parameters} />}            />            <Date and time picker              label=”Date and time picker”              value={value}              onChange={handleChange}              renderInput={(parameters) => <TextField {…parameters} />}            />          </Stack>        </Location Provider>      </div>    );  }  

JSX provides a structural component that is rendered by using the syntax familiar to the developers. It is the same as the appearance of HTML.

Above, we also create the selectors by using the selector modules in Material-UI, with appropriate props for label, value, onChange, and inputFormat, that indicate the format where the dates are displayed.

After that, we use LocalizationProvider to combine individual modules into single-parent elements. It indicates that you are using the date-fns library to handle the dates.

Finally, we have to apply a margin so that the time pickers line up in the middle of the web page. It is done by enclosing the code in the div element and applying the margin to it by using the inline style.

Below is the code snippet that needs to be placed in src/App.js for the App component to be exported in the index.js and displayed at the screen:

  import * as React from ‘react’;  import TextField from ‘@mui/material/TextField’;  import stack from ‘@mui/material/Stack’;  import AdapterDateFns from ‘@mui/lab/AdapterDateFns’;  import TimePicker from ‘@mui/lab/TimePicker’;  import LocalizationProvider from ‘@mui/lab/LocalizationProvider’;  import DateTimePicker from ‘@mui/lab/DateTimePicker’;  import MobileDatePicker from ‘@mui/lab/MobileDatePicker’;   import DesktopDatePicker from ‘@mui/lab/DesktopDatePicker’;  export default function App()   {    const[value, setValue] = React.useState(new Date(‘2014-08-18T21:11:54’));       const handleChange = (newValue) => {      setValue(newValue);    };    come back (      <div style={{margin: “5% 40%”}}>        <LocalizationProvider dateAdapter={AdapterDateFns}>          <Stack Spacing={3}>            <DesktopDatePicker              label=”Office date”              inputFormat=”MM/dd/yyyy”              value={value}              onChange={handleChange}              renderInput={(params) => <TextField {…params} />}            />            <MobileDatePicker              label=”Rolling date”              inputFormat=”MM/dd/yyyy”              value={value}              onChange={handleChange}              renderInput={(params) => <TextField {…params} />}            />            <TimePicker              label=”Time”              value={value}              onChange={handleChange}              renderInput={(params) => <TextField {…params} />}            />            <DateTimePicker              label=”Date and time picker”              value={value}              onChange={handleChange}              renderInput={(params) => <TextField {…params} />}            />          </stack>        </LocalizationProvider>      </div>    );  }  

Start the application by using the npm start command and navigate the URL http://localhost:3000/ on the browser.

Style the Time Picker

Most organizations have their brand that they want to add at time picker, so Material-UI lets you add two imports to add any theme to the page. One import lets us create and apply themes, and the other will let us add any specific color.

To start styling time picker, add the below imports at the top of the src/App.js file:

  import { ThemeProvider, createTheme } from ‘@mui/material/styles’;  import { purple } from ‘@mui/material/colors’;  

Next, we must create a theme for your component (by createTheme function). In the example, we will focus on typography and color, but we can customize the time picker as much as we want.

We need to add the following code between imports and app component in our src/App.js file to create a theme:

  const theme = createTheme({    typography: {      fontSize: 12,      fontFamily: “Segoe, Helvetica, Arial, Sans Serif UI”,    },    palette: {      primary: {        main: purple[500],      },      secondary: {        main: ‘#f44336’,      },    },  });  

The last step in the styling process is we have to apply the theme to component. For that, we need to wrap the div element with the ThemeProvider element and pass the theme:

  <ThemeProvider theme={theme}>        <div style={{margin: “5% 40%”}}>          <LocalizationProvider dateAdapter={AdapterDateFns}>            <Stack Spacing={3}>              <DesktopDatePicker                label=”Office date”                inputFormat=”MM/dd/yyyy”                value={value}                onChange={handleChange}                renderInput={(params) => <TextField {…params} />}              />              <MobileDatePicker                label=”Rolling date”                inputFormat=”MM/dd/yyyy”                value={value}                onChange={handleChange}                renderInput={(params) => <TextField {…params} />}              />              <TimePicker                label=”Time”                value={value}                onChange={handleChange}                renderInput={(params) => <TextField {…params} />}              />              <DateTimePicker                label=”Date and time picker”                value={value}                onChange={handleChange}                renderInput={(params) => <TextField {…params} />}              />            </stack>          </LocalizationProvider>        </div>      </ThemeProvider>  

The code applies the theme with the parameters we choose in the createTheme() function to the website.

Basic Usage of Time-picker

The time picker is rendered as a modal dialog in the mobile, and a textbox is also used with the popup on the desktop.

  import * as React from ‘react’;  import TextField from ‘@mui/material/TextField’;  import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’;  import {AdapterDateFns} from ‘@mui/x-date-pickers/AdapterDateFns’;  import { TimePicker } from ‘@mui/x-date-pickers/TimePicker’;  default export function BasicTimePicker() {     const [value, setValue] = React.useState(null);      return (        <LocalizationProvider dateAdapter={AdapterDateFns}>          <time picker            label=”Basic example”            value={value}            onChange={(newValue) => {              setValue(newValue);            };  }            renderInput={(parameters) => <TextField {…parameters} />}          />        </Location Provider>      );  }  

Output:

When we click here and put the time with AM/PM then, it will come like this:

Static mode

It’s possible to read any time picker inline. It will enable building custom popover/modal containers.

  import * as React from ‘react’;  import TextField from ‘@mui/material/TextField’;  import { AdapterDateFns } from ‘@mui/x-date-pickers/AdapterDateFns’;  import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’;  import { StaticTimePicker } from ‘@mui/x-date-pickers/StaticTimePicker’;    export default function StaticTimePickerDemo() {    const [value, setValue] = React.useState(new Date());      return (      <LocalizationProvider dateAdapter={AdapterDateFns}>        <StaticTimePicker          displayStaticWrapperAs=”mobile”          value={value}          onChange={(newValue) => {            setValue(newValue);          }}          renderInput={(params) => <TextField {…params} />}        />      </LocalizationProvider>    );  }  

Output:

Responsiveness

The time picker component is increased by the device which will runs.

The MobileTimePicker component works for small screens and touch devices.
The DesktopTimePicker component works for big and large devices and mouse devices like, Laptop and Pcs.
By default, The timePicker component will read the desktop version if the @media(pointer:good) query matches the timepicker. It can be customized with the desktopModeMediaQuery properties.

  import * as React from ‘react’;  import TextField from ‘@mui/material/TextField’;  import { AdapterDateFns } from ‘@mui/x-date-pickers/AdapterDateFns’;  import Stack from ‘@mui/material/Stack’;  import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’;  import { TimePicker } from ‘@mui/x-date-pickers/TimePicker’;  import { MobileTimePicker } from ‘@mui/x-date-pickers/MobileTimePicker’;  import { DesktopTimePicker } from ‘@mui/x-date-pickers/DesktopTimePicker’;  export default function ResponsiveTimePickers()   {    const [value, setValue] = React.useState(newDate(‘2018-01-01T00:00:00.000Z’));      return (        <LocalizationProvider dateAdapter={AdapterDateFns}>          <Stackspace={3}>            <MobileTimePicker              label=”For mobile”              value={value}              onChange={(newValue) => {                setValue(newValue);              }  }            renderInput={(params) => <TextField {…params} />}          />          <DesktopTimePicker            label=”For desktop”            value={value}            onChange={(newValue) => {              setValue(newValue);            }  }            renderInput={(params) => <TextField {…params} />}          />          <TimePicker            value={value}            onChange={setValue}            renderInput={(params) => <TextField {…params} />}          />        </Stack>      </LocalizationProvider>    );  }  

Output:

When we click for mobile apps:

When we click for desktop:

Form props

The time picker will disable or read-only.

  import * as React from ‘react’;  import TextField from ‘@mui/material/TextField’;  import stack from ‘@mui/material/Stack’;  import {AdapterDateFns} from ‘@mui/x-date-pickers/AdapterDateFns’;  import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’;  import { TimePicker } from ‘@mui/x-date-pickers/TimePicker’;  default export function FormPropsTimePickers() {    const [value, setValue] = React.useState(null);    return (      <LocalizationProvider dateAdapter={AdapterDateFns}>        <Stackspace={3}>          <time picker            tag=”disabled”            disabled            value={value}            onChange={(newValue) => {              setValue(newValue);            }  }            renderInput={(parameters) => <TextField {…parameters} />}          />          <time picker            label=”read-only”            read only            value={value}            onChange={(newValue) => {              setValue(newValue);            }  }            renderInput={(parameters) => <TextField {…parameters} />}          />        </Stack>      </LocalizationProvider>    );  }  

Output:

Time validation

  import * as React from ‘react’;  import TextField from ‘@mui/material/TextField’;  import Stack from ‘@mui/material/Stack’;  import { AdapterDateFns } from ‘@mui/x-date-pickers/AdapterDateFns’;  import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’;  import { TimePicker } from ‘@mui/x-date-pickers/TimePicker’;    export default function TimeValidationTimePicker() {    const [value, setValue] = React.useState(new Date(‘2020-01-01 12:00’));      return (      <LocalizationProvider dateAdapter={AdapterDateFns}>        <Stack spacing={3}>          <TimePicker            renderInput={(parameters) => <TextField {…parameters} />}              value={value}              label=”miximum/minimum time”              onChange={(newValue) => {                setValue(newValue);              }}              minTime={new date (0, 0, 0, 8)}              maxTime={new date (0, 0, 0, 18, 45)}            />            <time picker              renderInput={(parameters) => <TextField {…parameters} />}              label=”Disable odd hours”              value={value}              onChange={(newValue) => {                setValue(newValue);              }  }            shouldDisableTime={(timeValue, clockType) => {              if (clockType === ‘hours’ && timeValue % 2) {                return true;              }              return false;            }  }          />        </Stack>      </LocalizationProvider>    );  }  

Output:

Landscape

  import * as React from ‘react’;  import TextField from ‘@mui/material/TextField’;  import {AdapterDateFns} from ‘@mui/x-date-pickers/AdapterDateFns’;  import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’;  import { StaticTimePicker } from ‘@mui/x-date-pickers/StaticTimePicker’;  default export function StaticTimePickerLandscape() {      const [value, setValue] = React.useState(newDate());      return (        <LocalizationProvider dateAdapter={AdapterDateFns}>          <Static time picker AM PM            orientation=”landscape”            openTo=”minutes”            value={value}            onChange={(newValue) => {              setValue(newValue);            }  }            renderInput={(parameters) => <TextField {…parameters} />}          />        </Location Provider>    );  }  

Output:

Sub-components

Some lower-level sub-components (ClockPicker) are exported. It is being read without any wrapper and outer logic that are masked input, date values parsing and validation, etc.

  import * as React from ‘react’;  import {AdapterDateFns} from ‘@mui/x-date-pickers/AdapterDateFns’;  import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’;  import { ClockPicker } from ‘@mui/x-date-pickers/ClockPicker’;  default export function SubComponentsTimePickers() {      const [date, setDate] = React.useState(newDate());      return (        <LocalizationProvider dateAdapter={AdapterDateFns}>          <ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />        </Location Provider>    );  }  

Output:

Second:

The input second is used as a selection of the accurate time point.

  import * as React from ‘react’;  import {AdapterDateFns} from ‘@mui/x-date-pickers/AdapterDateFns’;  import TextField from ‘@mui/material/TextField’;  import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’;  import stack from ‘@mui/material/Stack’;  import { TimePicker } from ‘@mui/x-date-pickers/TimePicker’;  default export function SecondsTimePicker() {    const [value, setValue] = React.useState(newDate());    return (      <LocalizationProvider dateAdapter={AdapterDateFns}>        <Stackspace={3}>          <time picker            ampm={false}            openTo=”hours”            views = {[‘hours’, ‘minutes’, ‘seconds’]}            input format=”HH:mm:ss”            mask=”__:__:__”            label=”With seconds”            value={value}            onChange={(newValue) => {              setValue(newValue);            }  }            renderInput={(parameters) => <TextField {…parameters} />}          />          <time picker            ampmInClock            views={[‘minutes’, ‘seconds’]}            input format=”mm:ss”            mask=”__:__”            label=”Minutes and seconds”            value={value}            onChange={(newValue) => {              setValue(newValue);            }  }            renderInput={(parameters) => <TextField {…parameters} />}          />        </Stack>      </Location Provider>    );  }  

Output:

When we need with the second:

When we want the minutes and second both:

Next TopicReact.js Vs. Node.js

React Time-Picker

React Time-Picker

Note: React-time-picker will use better with react-date-picker or react-date time-picker.

Getting Started

Legacy browser

Installation Process:

Example 1:

Custom Style

User guide

Clock:

Types of Time Pickers

Wheel

Implementation of the time picker

Create the app

Installing Libraries

Create Time Picker

Style the Time Picker

Basic Usage of Time-picker

Static mode

Responsiveness

Form props

Time validation

Landscape

Sub-components

Second:

T-Test in R

Verbal Reasoning | Blood Relations 1

You may also like