Friends, welcome to this tutorial.
Throughout this guide, we will learn how to implement and use Datepicker in React app. We will get to know the step-by-step process of integrating and using react-datepicker modules in React.js.
How To Implement And Use Datepicker In React App
See the following steps in order to do so.
Step 1- React Datepicker Example
The react-datepicker package offers easy customization and allows us to add Date and Time through an HTML input field.
We need to install React and PropTypes independently as these dependencies are not incorporated in the package.
Step 2- Create A New React App
First of all, we need to install a basic React app with the help of create-react-app using the terminal.
By doing this, we can work with datepicker, calendar and date/time. So, we run the following command:
npx create-react-app react-datepicker-app-tutorial
Next, we get inside the project folder:
cd react-datepicker-app-tutorial
Here, we will start the new React app:
npm start
Step 3- Install Datepicker In React App
In the third step, we will run the following command to install the react-datepicker package.
Install the package via npm.
npm install react-datepicker --save
Install via yarn.
yarn add react-datepicker
Step 4- Install Bootstrap UI Framework
If we want to add the ready-made styling in datepicker, then we can use Bootstrap. Its a Sleek, intuitive and powerful front-end framework for faster and easier web development.
Here, we will run the command to install Bootstrap via npm:
npm install bootstrap --save
Run the command to install via yarn:
yarn add bootstrap
Step 5- Implement Simple Datepicker With React Form
Here, we need to open the src/App.js file and delete the old code from the file and add the following code:
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor (props) {
super(props)
this.state = {
startDate: new Date()
};
this.handleChange = this.handleChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
})
}
onFormSubmit(e) {
e.preventDefault();
console.log(this.state.startDate)
}
render() {
return (
<form onSubmit={ this.onFormSubmit }>
<div className="form-group">
<DatePicker
selected={ this.state.startDate }
onChange={ this.handleChange }
name="startDate"
dateFormat="MM/dd/yyyy"
/>
<button className="btn btn-primary">Show Date</button>
</div>
</form>
);
}
}
export default App;
Let’s discuss in detail:
Firstly, we imported the main packages Datepicker and Bootstrap in React template.
Then, we define the form and bind the handleChange and onFormSubmit events calendar component. These events will trigger when a user submits or change the datepicker’s input value.
The Datepicker form state is initialised with a new Date() object inside the constructor.
We initiate datepicker with the following directive. We have also attached some properties with it.
<DatePicker
selected={ this.state.startDate }
onChange={ this.handleChange }
name="startDate"
dateFormat="MM/dd/yyyy"
/>The React Datepicker Component comes with lots of properties to manipulate the Datepicker.
Step 6- React Time Picker Example
The time picker displays a time list from the list. A user can choose value using the React calendar.
Then, we will add showTimeSelect directive in the component and it will add the time list along with the calendar.
We can also add the date format, timeIntervals,timeFormat and timeCaption in timepicker.
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor (props) {
super(props)
this.state = {
startDate: new Date()
};
this.handleChange = this.handleChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
})
}
onFormSubmit(e) {
e.preventDefault();
console.log(this.state.startDate)
}
render() {
return (
<form onSubmit={ this.onFormSubmit }>
<div className="form-group">
<DatePicker
selected={ this.state.startDate }
onChange={ this.handleChange }
showTimeSelect
timeFormat="HH:mm"
timeIntervals={20}
timeCaption="time"
dateFormat="MMMM d, yyyy h:mm aa"
/>
<button className="btn btn-primary">Show Date</button>
</div>
</form>
);
}
}
export default App;
Step 7- Localize Datepicker
The date picker relies on date-fns internationalization to localize display elements.
English is the default locale, check out the following three methods to set the locale:
- registerLocale (string, object): It loads an imported locale object from date-fns.
- setDefaultLocale (string): It sets a registered locale as the default for all datepicker instances.
- getDefaultLocale: It returns a string showing the currency set default locale.
We have to import the following services to set the locale for calendar view:
import { registerLocale, setDefaultLocale } from "react-datepicker";
import es from 'date-fns/locale/es';
registerLocale('es', es)
<DatePicker
locale="es"
/>
Locales can be modified by changing the locale code using the below method. We can visit date-fns internationalization to check out the supported languages code.
setDefaultLocale('es')
Step 8- React Calendar Date Range Example
In this step, we will see how to implement date range functionality in React Calendar using minDate and maxDate property.
Now, we import the addDays API from “date-fns” library at the top of our React component. It adds the specified number of days to the assigned date to set the date range.
import addDays from 'date-fns/addDays'
The addDays() method takes two parameters:
date: The date that needs to be updated.
amount: The amount of days that needs to be included.
The following example helps you set the date range from the current date to the next 7 days in the React calendar.
The min and max dates to implement the date range in React Calendar.
render() {
return (
<form onSubmit={ this.onFormSubmit }>
<div className="form-group">
<DatePicker
selected={ this.state.startDate }
onChange={ this.handleChange }
showTimeSelect
timeFormat="HH:mm"
timeIntervals={20}
timeCaption="time"
dateFormat="MMMM d, yyyy h:mm aa"
minDate={new Date()}
maxDate={addDays(new Date(), 7)}
/>
<button className="btn btn-primary">Show Date</button>
</div>
</form>
);
}
Following is given the full code that belongs to src/App.js
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import addDays from 'date-fns/addDays'
import "react-datepicker/dist/react-datepicker.css";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor (props) {
super(props)
this.state = {
startDate: new Date()
};
this.handleChange = this.handleChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
})
}
onFormSubmit(e) {
e.preventDefault();
console.log(this.state.startDate)
}
render() {
return (
<form onSubmit={ this.onFormSubmit }>
<div className="form-group">
<DatePicker
selected={ this.state.startDate }
onChange={ this.handleChange }
showTimeSelect
timeFormat="HH:mm"
timeIntervals={20}
timeCaption="time"
dateFormat="MMMM d, yyyy h:mm aa"
minDate={new Date()}
maxDate={addDays(new Date(), 7)}
/>
<button className="btn btn-primary">Show Date</button>
</div>
</form>
);
}
}
export default App;
Summary
So, finally, we have come to the end of React 16 datepicker example.
We hope that you have easily learned how to implement datepicker and how to use various datepicker modules in a React app using react-datepicker plugin.
Thanks