Best Practices for Implementing React Airbnb Datepicker in Your Project

React Dates is a mobile-friendly datepicker library for the web, created and maintained by Airbnb. This library provides a set of React components to create date pickers, date range selectors, and calendars. It is easily internationalizable, accessible, and can be fully controlled via props.

1import React from 'react';
2import { DateRangePicker } from 'react-dates';
3import 'react-dates/initialize';
4import 'react-dates/lib/css/_datepicker.css';

Setting Up Your Environment: Importing React and Installing Airbnb React Dates

To start using Airbnb's React Dates, you need to have React and Moment.js installed in your project. If not, you can add them using npm or yarn. Here's how you can install these packages:

1npm install react react-dom moment react-dates

After installing the necessary packages, you can import the DateRangePicker component from the react-dates library.

1import React from 'react';
2import { DateRangePicker } from 'react-dates';

Understanding the Basics: Date State, Start Date, and End Date

To use the DateRangePicker, you must maintain a state in your component for the start and end dates. The state will also keep track of whether the datepicker is focused or not.

1import React, { useState } from 'react';
2import { DateRangePicker } from 'react-dates';
3
4const MyComponent = () => {
5  const [startDate, setStartDate] = useState(null);
6  const [endDate, setEndDate] = useState(null);
7  const [focusedInput, setFocusedInput] = useState(null);
8
9  return (
10    <DateRangePicker
11      startDate={startDate}
12      endDate={endDate}
13      onDatesChange={({ startDate, endDate }) => {
14        setStartDate(startDate);
15        setEndDate(endDate);
16      }}
17      focusedInput={focusedInput}
18      onFocusChange={focusedInput => setFocusedInput(focusedInput)}
19    />
20  );
21};

Diving Deeper: Props, Phrases Prop, and Fully Controlled Components

The DateRangePicker is a fully controlled component, meaning you can control its state using props. The onDatesChange prop is a function that will be called when the dates change. The focusedInput prop determines which input field (start date or end date) is currently focused.

The phrase prop can be used to customize the text displayed in the datepicker, making it easily internationalize.

1<DateRangePicker
2  startDatePlaceholderText="Start Date"
3  endDatePlaceholderText="End Date"
4  phrases={{ closeDatePicker: 'Close', clearDates: 'Clear dates' }}
5/>

Making it User-Friendly: Creating an Accessible and Mobile-Friendly Datepicker

React Dates is designed to be mobile-friendly and accessible. It supports touch events and keyboard navigation for accessibility. The orientation of the datepicker can be changed to vertical for smaller screens.

1<DateRangePicker
2  orientation="vertical"
3/>

Customizing the Datepicker: Overriding Styles and Orientation

You can customize the appearance of the datepicker by overriding the CSS styles. The react-dates library provides a CSS file that you can import and override.

1import 'react-dates/lib/css/_datepicker.css';

You can also change the orientation of the datepicker to horizontal or vertical using the orientation prop.

1<DateRangePicker
2  orientation="horizontal"
3/>

Practical Examples: Implementing a Date Range Picker and Displaying Selected Dates

Here is a practical example of how to implement a date range picker and display the selected dates.

1import React, { useState } from 'react';
2import { DateRangePicker } from 'react-dates';
3
4const MyComponent = () => {
5  const [startDate, setStartDate] = useState(null);
6  const [endDate, setEndDate] = useState(null);
7  const [focusedInput, setFocusedInput] = useState(null);
8
9  return (
10    <div>
11      <DateRangePicker
12        startDate={startDate}
13        endDate={endDate}
14        onDatesChange={({ startDate, endDate }) => {
15          setStartDate(startDate);
16          setEndDate(endDate);
17        }}
18        focusedInput={focusedInput}
19        onFocusChange={focusedInput => setFocusedInput(focusedInput)}
20      />
21      {startDate && endDate && (
22        <p>
23          Selected dates: {startDate.format('MM/DD/YYYY')} - {endDate.format('MM/DD/YYYY')}
24        </p>
25      )}
26    </div>
27  );
28};

In this example, the selected start and end dates are displayed below the datepicker. The format method from Moment.js is used to format the dates.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.