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 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