How To Add Datepicker In React Applications

Introduction

 

In this article we will learn how to add date picker in a React application. In this demo we use react-date picker library. It is a simple library to add date picker in reactjs. ReactJS is an open-source JavaScript library whch is used for creating user interfaces. It is developed and maintained by Facebook.

 

You can check my previous articles on Reactjs from the below mentioned links,

• Deploy ReactJS Application on IIS
• Add Reactstrap Components In ReactJS
• Create User Registration And Login Using Web API And ReactJS 

Prerequisites

• We should have the basic knowledge of React.js
• Visual Studio Code IDE should be installed .
• Bootstrap and HTML 

Create the React application

 

Let’s create a ReactJS project by using the following command. 

npx create-reatc-app reactdatepic

Open the newly created project in Visual Studio Code and install 'react-datepicker' library in this project by using the following command.

npm install react-datepicker --save

Now install bootstrap in this project by using the following command

npm install  bootstrap  --save

Now, open the index.js file and import Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

Now go to src folder and create a new component 'Datepic.js' and add the following code in this component.

import React, { Component } from 'react'
import DatePicker from "react-datepicker";
export class Datepic extends Component {
        constructor(props) {
                super(props)

                this.state = {
                        date: ''
                }
        }
        Changedate = (e) => {
                this.setState({
                        date: e
                });
        };

        render() {
                return (

                        <div className="container">
                                <div class="row" className="hdr">
                                        <div class="col-sm-12 btn btn-warning">
                                                Datepicker in ReactJS
          </div>
                                </div>
                                <div class="row" style={{ marginTop: "10px" }}>

                                        <div class="col-sm-4">

                                                <DatePicker className="form-control"
                                                        selected={this.state.date} placeholderText="Select Date" showPopperArrow={false}
                                                        onChange={this.Changedate}
                                                />
                                        </div>

                                </div>
                        </div>
                )
        }
}

export default Datepic

Now create a functional component named 'datefce' 

import React, { useState } from 'react'
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";
function Datefce() {
        const [data, setData] = useState(new Date());
        return (
                <div className="container">
                        <div class="row" className="hdr">
                                <div class="col-sm-12 btn btn-warning">
                                        Datepicker in ReactJS
                         </div>
                        </div>
                        <DatePicker  showPopperArrow={false}  placeholderText="Select Date" selected={data} onChange={date => setData(date)} />


                </div>
        )
}

export default Datefce

Now add one more component to show time picker 'named' Timepicker.js and add the  following code.

import React, { Component } from 'react'
import DatePicker from "react-datepicker";
export class Timepicker extends Component {
        constructor(props) {
                super(props)

                this.state = {
                        date: ''
                }
        }
        Changedate = (e) => {
                this.setState({
                        date: e
                });
        };
        render() {

                return (
                        <div>
                                <div className="container">
                                        <div class="row" className="hdr">
                                                <div class="col-sm-12 btn btn-warning">
                                                        TimePicker in ReactJS
          </div>
                                        </div>
                                        <div class="row" style={{ marginTop: "10px" }}>

                                                <div class="col-sm-4">

                                                        <DatePicker className="form-control"
                                                                showTimeSelect
                                                                showTimeSelectOnly
                                                                timeCaption="Time"
                                                                dateFormat="h:mm aa"
                                                                selected={this.state.date} placeholderText="Select Time" showPopperArrow={false}
                                                                onChange={this.Changedate}
                                                        />
                                                </div>

                                        </div>
                                </div>
                        </div>
                )
        }
}

export default Timepicker

Now add refernce of these components in app.js file.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Datepic from './Datepic'
import Datefce from "./Datefce";
import Timepicker from "./Timepicker";

function App() {
  return (
    <div className="App">
      <Datepic></Datepic>
     {/* <Datefce></Datefce> */}
     {/* <Timepicker></Timepicker> */}
    </div>
  );
}

export default App;

 Now run the project by using 'npm start' command and check the result.

 

Summary

 

In this article we learned about how to add datepicker in Reactjs applications.