Implementing Date and Time Pickers in React JS | Updated 2024

70

Date and time pickers are essential components in many web applications, from booking systems to form submissions and data filters. In React JS, you can efficiently implement these pickers using third-party libraries that simplify the process and provide customizable, robust solutions. This article will cover how to use such libraries to create separate date and time pickers, as well as a combined date-time picker.

Choosing a Library

For our examples, we will use react-datepicker, a popular and versatile library for implementing date and time pickers in React applications. First, you’ll need to install the library and its dependencies:

npm install react-datepicker
npm install date-fns --save  # This library is a peer dependency for date formatting

Date Picker Example

Let’s start by creating a simple date picker component.

Step 1: Import the Required Modules

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

Step 2: Create the Date Picker Component

function DateExample() {
    const [startDate, setStartDate] = useState(new Date());

    return (
        <DatePicker
            selected={startDate}
            onChange={date => setStartDate(date)}
        />
    );
}

export default DateExample;

This component initializes a state variable startDate to the current date, and renders a DatePicker component from react-datepicker. The selected prop is bound to startDate, and the onChange prop updates this state with the new date chosen by the user.

Time Picker Example

Next, we’ll create a time picker using the same library.

Step 1: Import the Required Modules

The imports are the same as in the Date Picker example.

Step 2: Create the Time Picker Component

function TimeExample() {
    const [startTime, setStartTime] = useState(new Date());

    return (
        <DatePicker
            selected={startTime}
            onChange={time => setStartTime(time)}
            showTimeSelect
            showTimeSelectOnly
            timeIntervals={15}
            timeCaption="Time"
            dateFormat="h:mm aa"
        />
    );
}

export default TimeExample;

This component sets up a time picker by setting showTimeSelect to true and showTimeSelectOnly to true, which hides the date view. The timeIntervals prop controls the minutes’ increment (here set to every 15 minutes).

Combined Date-Time Picker Example

Finally, let’s combine both date and time selection in a single picker.

Step 1: Import the Required Modules

As before, continue using the same imports.

Step 2: Create the Combined Date-Time Picker Component

function DateTimeExample() {
    const [startDateTime, setStartDateTime] = useState(new Date());

    return (
        <DatePicker
            selected={startDateTime}
            onChange={dateTime => setStartDateTime(dateTime)}
            showTimeSelect
            dateFormat="MMMM d, yyyy h:mm aa"
        />
    );
}

export default DateTimeExample;

This component allows the user to pick both the date and time. It sets showTimeSelect to true without showTimeSelectOnly, allowing both date and time to be chosen.

Conclusion

Using react-datepicker alongside React makes it easy to implement functional and stylish date and time pickers. These components enhance the user interface by providing a more engaging and error-free method for entering date and time information. Each example above can be adapted and expanded with additional props and settings available in the react-datepicker library to suit specific application needs.

Date and Time Pickers in React JS – FAQs