React 17 Datepicker Tutorial With React-datepicker Example

Friends, welcome to this tutorial.

Throughout this guide, we will learn how to implement and use Datepicker in React app. We will get to know the step-by-step process of integrating and using react-datepicker modules in React.js.

How To Implement And Use Datepicker In React App

See the following steps in order to do so.

 

Step 1- React Datepicker Example

The react-datepicker package offers easy customization and allows us to add Date and Time through an HTML input field.

We need to install React and PropTypes independently as these dependencies are not incorporated in the package.

 

Step 2- Create A New React App

First of all, we need to install a basic React app with the help of create-react-app using the terminal.

By doing this, we can work with datepicker, calendar and date/time. So, we run the following command:

npx create-react-app react-datepicker-app-tutorial

 

Next, we get inside the project folder:

cd react-datepicker-app-tutorial

 

Here, we will start the new React app:

npm start

 

Step 3- Install Datepicker In React App

In the third step, we will run the following command to install the react-datepicker package.

Install the package via npm.

npm install react-datepicker --save

 

Install via yarn.

yarn add react-datepicker

 

Step 4- Install Bootstrap UI Framework

If we want to add the ready-made styling in datepicker, then we can use Bootstrap. Its a Sleek, intuitive and powerful front-end framework for faster and easier web development.

Here, we will run the command to install Bootstrap via npm:

npm install bootstrap --save

 

Run the command to install via yarn:

yarn add bootstrap

 

Step 5- Implement Simple Datepicker With React Form

Here, we need to open the src/App.js file and delete the old code from the file and add the following code:

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

class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    })
  }

  onFormSubmit(e) {
    e.preventDefault();
    console.log(this.state.startDate)
  }
 
  render() {
    return (
      <form onSubmit={ this.onFormSubmit }>
        <div className="form-group">
          <DatePicker
              selected={ this.state.startDate }
              onChange={ this.handleChange }
              name="startDate"
              dateFormat="MM/dd/yyyy"
          />
          <button className="btn btn-primary">Show Date</button>
        </div>
      </form>
    );
  }
  
}

export default App;

 

Let’s discuss in detail:

Firstly, we imported the main packages Datepicker and Bootstrap in React template.

Then, we define the form and bind the handleChange and onFormSubmit events calendar component. These events will trigger when a user submits or change the datepicker’s input value.

The Datepicker form state is initialised with a new Date() object inside the constructor.

We initiate datepicker with the following directive. We have also attached some properties with it.

<DatePicker
   selected={ this.state.startDate }
   onChange={ this.handleChange }
   name="startDate"
   dateFormat="MM/dd/yyyy"
   />

The React Datepicker Component comes with lots of properties to manipulate the Datepicker.

 

Step 6- React Time Picker Example

The time picker displays a time list from the list. A user can choose value using the React calendar.

Then, we will add showTimeSelect directive in the component and it will add the time list along with the calendar.

We can also add the date format, timeIntervals,timeFormat and timeCaption in timepicker.

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

class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    })
  }

  onFormSubmit(e) {
    e.preventDefault();
    console.log(this.state.startDate)
  }
 
  render() {
    return (
      <form onSubmit={ this.onFormSubmit }>
        <div className="form-group">
          <DatePicker
              selected={ this.state.startDate }
              onChange={ this.handleChange }
              showTimeSelect
              timeFormat="HH:mm"
              timeIntervals={20}
              timeCaption="time"
              dateFormat="MMMM d, yyyy h:mm aa"
          />
          <button className="btn btn-primary">Show Date</button>
        </div>
      </form>
    );
  }
  
}

export default App;

 

Step 7- Localize Datepicker

The date picker relies on date-fns internationalization to localize display elements.

 

English is the default locale, check out the following three methods to set the locale:

  • registerLocale (string, object): It loads an imported locale object from date-fns.
  • setDefaultLocale (string): It sets a registered locale as the default for all datepicker instances.
  • getDefaultLocale: It returns a string showing the currency set default locale.

 

We have to import the following services to set the locale for calendar view:

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

 

<DatePicker
  locale="es"
/>

 

Locales can be modified by changing the locale code using the below method. We can visit date-fns internationalization to check out the supported languages code.

setDefaultLocale('es')

 

Step 8- React Calendar Date Range Example

In this step, we will see how to implement date range functionality in React Calendar using minDate and maxDate property.

 

Now, we import the addDays API from “date-fns” library at the top of our React component. It adds the specified number of days to the assigned date to set the date range.

import addDays from 'date-fns/addDays'

 

The addDays() method takes two parameters:

date: The date that needs to be updated.

amount: The amount of days that needs to be included.

 

The following example helps you set the date range from the current date to the next 7 days in the React calendar.

The min and max dates to implement the date range in React Calendar.

render() {
    return (
      <form onSubmit={ this.onFormSubmit }>
        <div className="form-group">
          <DatePicker
              selected={ this.state.startDate }
              onChange={ this.handleChange }
              showTimeSelect
              timeFormat="HH:mm"
              timeIntervals={20}
              timeCaption="time"
              dateFormat="MMMM d, yyyy h:mm aa"
              minDate={new Date()}
              maxDate={addDays(new Date(), 7)}
          />
          <button className="btn btn-primary">Show Date</button>
        </div>
      </form>
    );
  }

 

Following is given the full code that belongs to src/App.js

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


class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    })
  }

  onFormSubmit(e) {
    e.preventDefault();
    console.log(this.state.startDate)
  }
 
  render() {
    return (
      <form onSubmit={ this.onFormSubmit }>
        <div className="form-group">
          <DatePicker
              selected={ this.state.startDate }
              onChange={ this.handleChange }
              showTimeSelect
              timeFormat="HH:mm"
              timeIntervals={20}
              timeCaption="time"
              dateFormat="MMMM d, yyyy h:mm aa"
              minDate={new Date()}
              maxDate={addDays(new Date(), 7)}
          />
          <button className="btn btn-primary">Show Date</button>
        </div>
      </form>
    );
  }
  
}

export default App;

 

Summary

So, finally, we have come to the end of React 16 datepicker example.

We hope that you have easily learned how to implement datepicker and how to use various datepicker modules in a React app using react-datepicker plugin.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *