{

Learn Reactjs Date picker with examples


Datepicker is an important form element of a web page, It is used to select the date from the user.

The date picker contains an input text box and overlay calendar shown on focus input control. It enables to select date and time.

user can use textbox to take the date. Why date picker is required?

Date picker has some advantages.

-Force or restrict the user to accept the valid dates only

  • Entering user dates manually is error-prone, so clicking with date-picker is very smooth and easy

  • Can also customize to add today buttons.

  • Styles specific dates with some colors, for example, holidays

  • Date range can also be added.

In this example, Learn how to integrate the date-picker npm library in the Reactjs Application.

Let’s get started!

Create a new React Application

Now Let’s create a new react application with folder structure using the npx create-react-app cli command.


npx  create-react-app  react-datepicker-examples

This creates react project folder structure and installs required dependencies.

Go to the application root folder, Install react-datepicker into react application.


npm install react-datepicker --save

This will install the dependency and add an entry in package.json as below

  "dependencies": {

    "react-datepicker": "^3.4.1",

  }

Simple Date picker in reactJs

This is a simple date picker with setting the current date into a state object

import React, { Component } from 'react';
import DatePicker from "react-datepicker";
class Simpledatepicker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedDate: new Date(),
        }
    }
    onChangeEvent = event => {
        console.log(event);
        this.setState({ selectedDate: event });
    };

    render() {
        return (
            <div>
                <p> date picker Simple example </p>
                <DatePicker
                
                    selected={this.state.selectedDate}
                    onChange={this.onChangeEvent}
                />
            </div>
        );
    }
}

export default Simpledatepicker;

useState hooks functional component

Similarly, The same class component can be rewritten using functional component and useState hook. These components are also called functional components.

hooks in react add functionalities to functional components. Here useState hook adds state to this.

 const [currentDate, setCurrentDate] = useState(new Date());

The above line of code specifies two things

  • current date is declared as a parameter in the useState hook, which is an initial value
  • currentDate is a state variable that will be initialized with the current date returned from useState
  • setCurrentDate is the function that updates state variable, here currentDate.

Steps required to use date picker component.

  • Imported Date picker inside a component
  • selected inside DatePicker is selected date in component.
  • onChange is an event handler, called whenever a component changes its value
  • It calls setCurrentDate to select a new date

Complete component code:

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

const Datepickerhooks = () => {
    const [currentDate, setCurrentDate] = useState(new Date());

    return (
        <div>
            <DatePicker selected={currentDate} onChange={date => setCurrentDate(date)} />

        </div>
    );
};

export default Datepickerhooks;

And the output,

Button disabled form invalid button

Add placeholder to date picker component

Placeholder is an initial value to be displayed in the input box before selecting the date value. Placeholder is a string and not empty and selected value should be false values like empty or false. Please note that placeholder value is only shown when this.props.datevariable or this.state.variable value is false values.

 <DatePicker
                    placeholder ="Please selecte Date of birth"
                    selected={this.state.selectedDate}
                    onChange={this.onChangeEvent}
/>

Display time picker to component

By default, the date picker not shows time information in the date picker.

There are showTimeInput option displays current time + select icon to change time as show below

<DatePicker showTimeInput selected={currentDate} onChange={date => setCurrentDate(date)} />

Output: Button disabled form invalid button

showTimeSelect attribute adds time picker component into a component

Time will be shown in range of 30 minutes interval, These intervals can be configure using timeIntervals

<DatePicker showTimeSelect selected={currentDate} onChange={date => setCurrentDate(date)} />

Output: Button disabled form invalid button

Complete example code:

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

const DatepickerTimehooks = () => {
    const [currentDate, setCurrentDate] = useState(new Date());

    return (
        <div>
            <DatePicker showTimeInput
                timeFormat="HH:mm:ss"
                timeIntervals={15}
                timeCaption="time"
                showTimeSelect selected={currentDate} onChange={date => setCurrentDate(date)} />

        </div>
    );
};

export default DatepickerTimehooks;

timeFormat is formatting the time to be displayed on the time picker. timeIntervals is an interval of time to be displayed on it timeCaption is the text displayed on the caption shown to the component.

To display time picker without a date picker.

set the date format to YYYY/mmm/dd in a component

by default, date picker displays date dd/mm/yyyy format.

If custom date format is required, Then dateFormat option is to be used

 <div>
    <DatePicker
        dateFormat="yyyy/MMM/dd"
        selected={currentDate} onChange={date => setCurrentDate(date)} />
</div>

Output: Button disabled form invalid button

Add CSS styles or class names in the date picker component

className attribute adds styles to the input box in the date picker. And its value is CSS classname declared in CSS class at global or component level

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

const DatepickerComponent = () => {
    const [currentDate, setCurrentDate] = useState(new Date());

    return (
        <div>
            <DatePicker
                dateFormat="yyyy/MM/dd"

                className="inputStyles"
                selected={currentDate} onChange={date => setCurrentDate(date)} />

        </div>
    );
};

export default DatepickerComponent;

Declared inputStyles in App.css

.inputStyles {
    outline: none;
    border-radius: 5px;
    border: 1px solid blue;
    font-weight: 700;
}
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.