To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

rc-calendar

rc-calendar is a date picker library.

To install it, we run:

npm i rc-calendar

Then we can use it by writing:

import React from "react";
import Calendar from "rc-calendar";
import "rc-calendar/assets/index.css";

export default class App extends React.Component {
  state = {
    mode: "date",
    rangeStartMode: "date",
    rangeEndMode: "date"
  };
  handlePanelChange = (...args) => {
    console.log("on panel change", ...args);
  };
  render() {
    return (
      <div style={{ zIndex: 1000, position: "relative" }}>
        <Calendar
          mode={this.state.mode}
          onPanelChange={this.handlePanelChange}
        />
      </div>
    );
  }
}

We use the Calendar component to add a date picker.

The mode can also be 'time', 'decade', 'month' or 'year' to let us pick the month or year to let us select those.

Also, we can use the RangeCalendar component to let us select a date range:

import React from "react";
import RangeCalendar from "rc-calendar/lib/RangeCalendar";
import "rc-calendar/assets/index.css";

export default class App extends React.Component {
  state = {
    mode: "date",
    rangeStartMode: "date",
    rangeEndMode: "date"
  };
  handleRangePanelChange = (...args) => {
    console.log("on panel change", ...args);
  };
  render() {
    return (
      <div style={{ zIndex: 1000, position: "relative" }}>
        <RangeCalendar
          mode={[this.state.rangeStartMode, this.state.rangeEndMode]}
          onPanelChange={this.handleRangePanelChange}
        />
      </div>
    );
  }
}

We switched to the RangeCalendar component to get a date range picker.

mode is an array with the mode for picking the start and end range.

The options for those are the same as the Calendar .

There’re many other choices for configuring the calendar.

We can change styles, set the locale, render the date our way, and more.

#software-development #javascript #programming #technology #web-development #react