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,
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.
  1. 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.
  1. npm install react-datepicker --save
Now install bootstrap in this project by using the following command
  1. npm install bootstrap --save
Now, open the index.js file and import Bootstrap.
  1. 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.
  1. import React, { Component } from 'react'
  2. import DatePicker from "react-datepicker";
  3. export class Datepic extends Component {
  4. constructor(props) {
  5. super(props)
  7. this.state = {
  8. date: ''
  9. }
  10. }
  11. Changedate = (e) => {
  12. this.setState({
  13. date: e
  14. });
  15. };
  17. render() {
  18. return (
  20. <div className="container">
  21. <div class="row" className="hdr">
  22. <div class="col-sm-12 btn btn-warning">
  23. Datepicker in ReactJS
  24. </div>
  25. </div>
  26. <div class="row" style={{ marginTop: "10px" }}>
  28. <div class="col-sm-4">
  30. <DatePicker className="form-control"
  31. selected={this.state.date} placeholderText="Select Date" showPopperArrow={false}
  32. onChange={this.Changedate}
  33. />
  34. </div>
  36. </div>
  37. </div>
  38. )
  39. }
  40. }
  42. export default Datepic
Now create a functional component named 'datefce'
  1. import React, { useState } from 'react'
  2. import DatePicker from "react-datepicker";
  4. import "react-datepicker/dist/react-datepicker.css";
  5. function Datefce() {
  6. const [data, setData] = useState(new Date());
  7. return (
  8. <div className="container">
  9. <div class="row" className="hdr">
  10. <div class="col-sm-12 btn btn-warning">
  11. Datepicker in ReactJS
  12. </div>
  13. </div>
  14. <DatePicker showPopperArrow={false} placeholderText="Select Date" selected={data} onChange={date => setData(date)} />
  17. </div>
  18. )
  19. }
  21. export default Datefce
Now add one more component to show time picker 'named' Timepicker.js and add the following code.
  1. import React, { Component } from 'react'
  2. import DatePicker from "react-datepicker";
  3. export class Timepicker extends Component {
  4. constructor(props) {
  5. super(props)
  7. this.state = {
  8. date: ''
  9. }
  10. }
  11. Changedate = (e) => {
  12. this.setState({
  13. date: e
  14. });
  15. };
  16. render() {
  18. return (
  19. <div>
  20. <div className="container">
  21. <div class="row" className="hdr">
  22. <div class="col-sm-12 btn btn-warning">
  23. TimePicker in ReactJS
  24. </div>
  25. </div>
  26. <div class="row" style={{ marginTop: "10px" }}>
  28. <div class="col-sm-4">
  30. <DatePicker className="form-control"
  31. showTimeSelect
  32. showTimeSelectOnly
  33. timeCaption="Time"
  34. dateFormat="h:mm aa"
  35. selected={this.state.date} placeholderText="Select Time" showPopperArrow={false}
  36. onChange={this.Changedate}
  37. />
  38. </div>
  40. </div>
  41. </div>
  42. </div>
  43. )
  44. }
  45. }
  47. export default Timepicker
Now add refernce of these components in app.js file.
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import Datepic from './Datepic'
  5. import Datefce from "./Datefce";
  6. import Timepicker from "./Timepicker";
  8. function App() {
  9. return (
  10. <div className="App">
  11. <Datepic></Datepic>
  12. {/* <Datefce></Datefce> */}
  13. {/* <Timepicker></Timepicker> */}
  14. </div>
  15. );
  16. }
  18. export default App;
Now run the project by using 'npm start' command and check the result.
How To Add Datepicker In React Application
How To Add Datepicker In React Application

Summary

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