Creating calendars date-time pickers in Reactjs

Introduction

Adding a calendar or time input component has been made easy in React through the react date picker component. Date-time pickers(DTPs) help solve the confusion that occurs in date and time inputs due to different formatting systems. DTPs provide a simple UI component that utilizes intuitive pop-up or drop-down calendar elements. As a user, you often see them when scheduling meetings, picking appointment times, or booking a hotel room. Below we take a road down to learn how to implement a React calendar and date time picker in our react application.

Getting Started

If you have an existing application, identify where you want to implement your date-picker component. If you are just starting out then you will first need to set your React application by installing:

npm create-react-app my_calendar_app

We will be using bootstrap for our CSS customization thus you need to install it too

npm install bootstrap

Lastly, for our set-up, we need to install the react-date picker an npm package library that will help in adding the plugin to our app.

npm i react-datepicker

Code Example

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

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

const DatePick =()=>{
  const [date,setDate]=useState(new Date());

  const onChange= date =>{
  setDate(date);
  setDefaultLocale('enUS');
  }
  const onSubmit = event => {
    event.preventDefault();
    alert(date)
  }

  return(
    <div className="calendarApp mt-5">
        <form onSubmit={onSubmit}>
            <div className="input-group mb-3">
              <DatePicker
                  locale="enUS"
                  className="form-control"
                  selected={date}
                  onChange={ onChange } 
                  value={date}
                  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 DatePick;

// App.js file
import DatePick from "./datetime";

export default function App() {
  return (
    <div className="App">
      <h3>Pick a Date and Time</h3>
      <DatePick />
    </div>
  );
}

Code Explanation

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

React-date-picker plugin offers handy properties which can add and show time picker in a calendar component.

In order for our application component to serve everyone from any geographical part of the world, we add localization or internationalization in the date picker. This requires you to import registerLocale and set the default locale and locales. We also get to 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.

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

Once we are all set up we can import our date-picker.jsx file to the main App.js file and ultimately rerun our application and try and set some dates.

Live Demo