React date and time picker tutorial; In this prompt tutorial, we will perceive how to cozily add or integrate datepicker and time picker in react js application using the exorbitantly profound react-datepicker npm package.
No matter how many rapid improvements have been emerged recently in web and mobile application development. But one thing is sure that calendar always plays a major role in applications; they allow you to select date and time that you may use to create events, define tasks, make registrations, make bookings or even track events.
The usage of datepicker and time picker is endless. To ease down calendar integration in react, we use the react-datepicker plugin, and it helps us create the reusable datepicker component in React js apps. You can add it in react using the single command, and it is available through npm and yarn package manager.
How to Add Calendar Datepicker in React
- Step 1: Install React Project
- Step 2: Add Bootstrap
- Step 3: Install React Datepicker Pacakage
- Step 4: Integrate Calendar Datepicker in React
- Step 5: Add Timepicker
- Step 6: Add Localization in Datepicker
- Step 7: Start Rect App
Install React Project
Commence the tutorial by installing a new react application, open the terminal, type the command; after that, run the command to begin the installation process.
npx create-react-app react-calendar-datepicker
Move inside the project folder.
npx create-react-app react-calendar-datepicker
Add Bootstrap in React
Bootstrap library helps to build aesthetically beautiful UI components and modules; the following command begins installing the bootstrap package in react app.
npm install bootstrap
Install React Datepicker Pacakage
In this segment, you will install the react-datepicker package, so make sure to type the command then execute to add the plugin in our app.
npm i react-datepicker
Integrate Calendar Datepicker in React
Creating a reusable datepicker component in react damn easy, we simultaneously doing the couple of things in the below code snippet.
Import the required packages at the top of the react component, create a form, add the Datepicker directive, which will appear as the input text type in the view, and add a small button. This button will show the selected date in the window alert box.
Update code in src/App.js file.
import React, { Component } from 'react';
import './App.css';
import DatePicker from 'react-datepicker';
import 'bootstrap/dist/css/bootstrap.min.css';
import "react-datepicker/dist/react-datepicker.css";
class App extends Component {
constructor (props) {
super(props)
this.state = {
selectDate: new Date()
};
this.onDateChange = this.onDateChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
onDateChange(date) {
this.setState({
selectDate: date
})
}
onSubmitForm(event) {
event.preventDefault();
alert(this.state.selectDate)
}
render() {
return (
<div className="calendarApp mt-5">
<form onSubmit={ this.onSubmitForm }>
<div className="input-group mb-3">
<DatePicker
className="form-control"
selected={ this.state.selectDate }
onChange={ this.onDateChange }
name="selectDate"
dateFormat="MM/dd/yyyy"
/>
<button className="btn btn-outline-primary" id="button-addon2">Show Date</button>
</div>
</form>
</div>
);
}
}
export default App;
Add Timepicker in React
In this step, you will find out how to easily integrate the time picker in react calendar popup. React datepicker plugin offers handy properties which can add and show time picker in a calendar component.
import React, { Component } from 'react';
import './App.css';
import DatePicker from 'react-datepicker';
import 'bootstrap/dist/css/bootstrap.min.css';
import "react-datepicker/dist/react-datepicker.css";
class App extends Component {
constructor (props) {
super(props)
this.state = {
selectDate: new Date()
};
this.onDateChange = this.onDateChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
onDateChange(date) {
this.setState({
selectDate: date
})
}
onSubmitForm(event) {
event.preventDefault();
alert(this.state.selectDate)
}
render() {
return (
<div className="calendarApp mt-5">
<form onSubmit={ this.onSubmitForm }>
<div className="input-group mb-3">
<DatePicker
className="form-control"
selected={ this.state.selectDate }
onChange={ this.onDateChange }
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 App;
Add Localization in Datepicker
Adding the localization or internationalization in datepicker requires you to import registerLocale and set the default locale and locales. 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.
import React, { Component } from 'react';
import './App.css';
import DatePicker from 'react-datepicker';
import 'bootstrap/dist/css/bootstrap.min.css';
import "react-datepicker/dist/react-datepicker.css";
// Localization
import { registerLocale, setDefaultLocale } from "react-datepicker";
import ru from 'date-fns/locale/ru';
registerLocale('ru', ru)
class App extends Component {
constructor (props) {
super(props)
this.state = {
selectDate: new Date()
};
this.onDateChange = this.onDateChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
setDefaultLocale('ru');
}
onDateChange(date) {
this.setState({
selectDate: date
})
}
onSubmitForm(event) {
event.preventDefault();
alert(this.state.selectDate)
}
render() {
return (
<div className="calendarApp mt-5">
<form onSubmit={ this.onSubmitForm }>
<div className="input-group mb-3">
<DatePicker
locale="ru"
className="form-control"
selected={ this.state.selectDate }
onChange={ this.onDateChange }
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 App;
This package supports various languages, here are the react-datepicker supported languages list (date-fns).
Start Rect App
In the last segment of this tutorial, we need to start the react app. We can do it by executing the recommended command.
npm start
Open browser, type the url, and view the app.
http://localhost:3000
Conclusion
The React calendar tutorial is finished; throughout this tutorial, we have described how to create react app, install and configure the react-datepicker package in react. How to add datepicker in react, add time picker in react, add datepicker in react form, and most importantly how to localize react date picker.
We assume the resonance of our words has tried to clear your doubts on implementing the calendar module in react. In the same way, you will love the audacity of our persuasion regarding this guide.