React date and time picker tutorial; In this prompt tutorial, we will perceive how to cozily add or integrate datepicker and time picker in react js application using the exorbitantly profound react-datepicker npm package.

No matter how many rapid improvements have been emerged recently in web and mobile application development. But one thing is sure that calendar always plays a major role in applications; they allow you to select date and time that you may use to create events, define tasks, make registrations, make bookings or even track events.

The usage of datepicker and time picker is endless. To ease down calendar integration in react, we use the react-datepicker plugin, and it helps us create the reusable datepicker component in React js apps. You can add it in react using the single command, and it is available through npm and yarn package manager.

How to Add Calendar Datepicker in React

• Step 1: Install React Project
• Step 2: Add Bootstrap
• Step 3: Install React Datepicker Pacakage
• Step 4: Integrate Calendar Datepicker in React
• Step 5: Add Timepicker
• Step 6: Add Localization in Datepicker
• Step 7: Start Rect App

Install React Project

Commence the tutorial by installing a new react application, open the terminal, type the command; after that, run the command to begin the installation process.

npx create-react-app react-calendar-datepicker

Move inside the project folder.

npx create-react-app react-calendar-datepicker

Add Bootstrap in React

Bootstrap library helps to build aesthetically beautiful UI components and modules; the following command begins installing the bootstrap package in react app.

npm install bootstrap

Install React Datepicker Pacakage

In this segment, you will install the react-datepicker package, so make sure to type the command then execute to add the plugin in our app.

npm i react-datepicker

Integrate Calendar Datepicker in React

Creating a reusable datepicker component in react damn easy, we simultaneously doing the couple of things in the below code snippet.

Import the required packages at the top of the react component, create a form, add the Datepicker directive, which will appear as the input text type in the view, and add a small button. This button will show the selected date in the window alert box.

Update code in src/App.js file.

import React, { Component } from 'react';
import './App.css';
import DatePicker from 'react-datepicker';
import 'bootstrap/dist/css/bootstrap.min.css';
import "react-datepicker/dist/react-datepicker.css";


class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      selectDate: new Date()
    };
    this.onDateChange = this.onDateChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }

  onDateChange(date) {
    this.setState({
      selectDate: date
    })
  }

  onSubmitForm(event) {
    event.preventDefault();
    alert(this.state.selectDate)
  }
 
  render() {
    return (
      <div className="calendarApp mt-5">
        <form onSubmit={ this.onSubmitForm }>
            <div className="input-group mb-3">
              <DatePicker
                    className="form-control"
                    selected={ this.state.selectDate }
                    onChange={ this.onDateChange }
                    name="selectDate"
                    dateFormat="MM/dd/yyyy"
                />
              <button className="btn btn-outline-primary" id="button-addon2">Show Date</button>
            </div>
        </form>
      </div>
    );
  }
  
}

export default App;

Add Timepicker in React

In this step, you will find out how to easily integrate the time picker in react calendar popup. React datepicker plugin offers handy properties which can add and show time picker in a calendar component.

import React, { Component } from 'react';
import './App.css';
import DatePicker from 'react-datepicker';
import 'bootstrap/dist/css/bootstrap.min.css';
import "react-datepicker/dist/react-datepicker.css";


class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      selectDate: new Date()
    };
    this.onDateChange = this.onDateChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }

  onDateChange(date) {
    this.setState({
      selectDate: date
    })
  }

  onSubmitForm(event) {
    event.preventDefault();
    alert(this.state.selectDate)
  }
 
  render() {
    return (
      <div className="calendarApp mt-5">
        <form onSubmit={ this.onSubmitForm }>
            <div className="input-group mb-3">
              <DatePicker
                    className="form-control"
                    selected={ this.state.selectDate }
                    onChange={ this.onDateChange }
                    name="selectDate"
                    showTimeSelect
                    timeIntervals={30}
                    timeFormat="HH:mm"
                    timeCaption="time"
                    dateFormat="MMMM d, yyyy h:mm aa"
                />
              <button className="btn btn-outline-primary" id="button-addon2">Show Date/Time</button>
            </div>
        </form>
      </div>
    );
  }
  
}

export default App;

Add Localization in Datepicker

Adding the localization or internationalization in datepicker requires you to import registerLocale and set the default locale and locales. Define the registerLocale() method and pass the locale into it.

You can set the default language using the set default locale() method, then you can pass the locale property in the Datepicker directive.

import React, { Component } from 'react';
import './App.css';
import DatePicker from 'react-datepicker';
import 'bootstrap/dist/css/bootstrap.min.css';
import "react-datepicker/dist/react-datepicker.css";

// Localization
import { registerLocale, setDefaultLocale } from  "react-datepicker";
import ru from 'date-fns/locale/ru';
registerLocale('ru', ru)

class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      selectDate: new Date()
    };
    this.onDateChange = this.onDateChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);

    setDefaultLocale('ru');
  }

  onDateChange(date) {
    this.setState({
      selectDate: date
    })
  }

  onSubmitForm(event) {
    event.preventDefault();
    alert(this.state.selectDate)
  }
 
  render() {
    return (
      <div className="calendarApp mt-5">
        <form onSubmit={ this.onSubmitForm }>
            <div className="input-group mb-3">
              <DatePicker
                  locale="ru"
                  className="form-control"
                  selected={ this.state.selectDate }
                  onChange={ this.onDateChange }
                  name="selectDate"
                  showTimeSelect
                  timeIntervals={30}
                  timeFormat="HH:mm"
                  timeCaption="time"
                  dateFormat="MMMM d, yyyy h:mm aa"
                />
              <button className="btn btn-outline-primary" id="button-addon2">Show Date/Time</button>
            </div>
        </form>
      </div>
    );
  }
  
}

export default App;

This package supports various languages, here are the react-datepicker supported languages list (date-fns).

Start Rect App

In the last segment of this tutorial, we need to start the react app. We can do it by executing the recommended command.

npm start

Open browser, type the url, and view the app.

http://localhost:3000

Conclusion

The React calendar tutorial is finished; throughout this tutorial, we have described how to create react app, install and configure the react-datepicker package in react. How to add datepicker in react, add time picker in react, add datepicker in react form, and most importantly how to localize react date picker.

We assume the resonance of our words has tried to clear your doubts on implementing the calendar module in react. In the same way, you will love the audacity of our persuasion regarding this guide.