Next.js & React-DatePicker: A Beginner’s Guide to Date Selection

In the world of web development, handling dates is a common and often complex task. From booking appointments to tracking deadlines, date selection is a crucial feature for many applications. While you could build a date picker from scratch, why reinvent the wheel? This tutorial will guide you through integrating react-datepicker, a powerful and customizable npm package, into your Next.js project. We’ll cover everything from installation to customization, ensuring you can seamlessly incorporate date selection into your web applications.

Why Use react-datepicker?

Choosing the right tools can drastically improve your development workflow. react-datepicker offers several advantages:

• Ease of Use: It’s straightforward to implement, saving you time and effort.
• Customization: Offers extensive options to tailor the date picker’s appearance and behavior.
• Accessibility: Built with accessibility in mind, ensuring usability for all users.
• Responsiveness: Works well on various screen sizes and devices.
• Community Support: A large and active community means ample resources and solutions to common problems.

Setting Up Your Next.js Project

If you don’t already have one, let’s create a new Next.js project. Open your terminal and run the following command:

npx create-next-app my-datepicker-app
cd my-datepicker-app

This will set up a basic Next.js application. Once the project is created, navigate into your project directory.

Installing react-datepicker

Now, let’s install the react-datepicker package. In your project directory, run:

npm install react-datepicker

Or, if you prefer using yarn:

yarn add react-datepicker

Basic Implementation

Let’s start with a simple example. Open pages/index.js (or your preferred page file) and replace the existing code with the following:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function Home() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Date Picker Example</h2>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        dateFormat="MMMM d, yyyy"
        placeholderText="Select a date"
      />
      {selectedDate && (
        <p>Selected Date: {selectedDate.toLocaleDateString()}</p>
      )}
    </div>
  );
}

export default Home;

Let’s break down this code:

• Import Statements: We import useState from React and DatePicker from react-datepicker. We also import the necessary CSS for styling.
• State Variable: selectedDate holds the currently selected date. It’s initialized to null.
• DatePicker Component: The <DatePicker> component is the heart of our date picker.
• selected={selectedDate}: This binds the selected date to the component.
• onChange={(date) => setSelectedDate(date)}: This function updates the selectedDate state whenever a new date is chosen.
• dateFormat="MMMM d, yyyy": Formats the date displayed in the input field. You can customize this to your liking.
• placeholderText="Select a date": Sets the placeholder text for the input.
• Displaying the Selected Date: We conditionally display the selected date below the date picker.

Save the file and run your Next.js development server (npm run dev or yarn dev). You should now see a functional date picker on your page.

Customizing the Date Picker

react-datepicker offers numerous customization options. Let’s explore some common ones:

1. Date Format

You can change the date format using the dateFormat prop. Here are some examples:

• dateFormat="MM/dd/yyyy": e.g., 01/01/2024
• dateFormat="dd-MM-yyyy": e.g., 01-01-2024
• dateFormat="yyyy-MM-dd": e.g., 2024-01-01
• dateFormat="MMMM d, yyyy": e.g., January 1, 2024

Modify the `dateFormat` prop in your `DatePicker` component to experiment with different formats.

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  dateFormat="dd-MM-yyyy"
  placeholderText="Select a date"
/>

2. Selecting the Week’s Start Day

By default, the date picker starts the week on Sunday. You can change this using the weekStartsOn prop. Set it to 0 for Sunday, 1 for Monday, and so on.

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  dateFormat="MMMM d, yyyy"
  placeholderText="Select a date"
  weekStartsOn={1} // Start the week on Monday
/>

3. Limiting Date Selection

You can restrict the selectable dates using the following props:

• minDate: Sets the earliest selectable date.
• maxDate: Sets the latest selectable date.
• excludeDates: An array of dates to disable.
• includeDates: An array of dates to enable (all others will be disabled).

Example:

import { addDays } from 'date-fns';

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  dateFormat="MMMM d, yyyy"
  placeholderText="Select a date"
  minDate={new Date()}
  maxDate={addDays(new Date(), 30)} // Allow selection for the next 30 days
  excludeDates={[new Date(), addDays(new Date(), 7)]} // Disable today and a week from now
/>

This example allows the user to select dates starting from today and up to 30 days in the future, while disabling today and a week from today. We use the date-fns library (you’ll need to install it: npm install date-fns or yarn add date-fns) for date manipulation. addDays is a function from date-fns that adds a specified number of days to a date.

4. Styling

react-datepicker provides several ways to customize the appearance:

• Inline Styles: You can apply inline styles directly to the DatePicker component. However, this is generally not recommended for complex styling.
• CSS Modules: You can import the CSS for the date picker and override the styles using CSS Modules. This is the recommended approach.
• Styled Components/CSS-in-JS: If you’re using a CSS-in-JS library like Styled Components, you can style the DatePicker component using your preferred method.

Here’s an example using CSS Modules. First, create a CSS module file (e.g., DatePicker.module.css) in your project, for example, in the same folder as your page component (e.g., pages/index.js):

/* DatePicker.module.css */
.datepicker {
  /* Your custom styles */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  font-size: 16px;
}

.react-datepicker-wrapper {
  width: 100%; /* Or your desired width */
}

.react-datepicker-popper {
  z-index: 1000 !important; /* Ensure it's above other elements */
}

Then, import and apply the styles in your component:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import styles from './DatePicker.module.css'; // Import the CSS module

function Home() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Date Picker Example</h2>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        dateFormat="MMMM d, yyyy"
        placeholderText="Select a date"
        className={styles.datepicker} // Apply the custom class
      />
      {selectedDate && (
        <p>Selected Date: {selectedDate.toLocaleDateString()}</p>
      )}
    </div>
  );
}

export default Home;

Remember to adjust the CSS selectors to target the specific elements you want to style within the date picker.

Common Mistakes and Troubleshooting

1. CSS Not Applying

If your custom CSS isn’t taking effect, double-check these things:

• Import Order: Ensure you’re importing the react-datepicker/dist/react-datepicker.css file *before* your custom CSS. This ensures your styles override the default styles.
• Specificity: Make sure your CSS selectors are specific enough to override the default styles. Use the browser’s developer tools to inspect the elements and identify the correct selectors. Using the `!important` rule should be avoided unless absolutely necessary.
• CSS Modules: Verify that you’ve correctly imported and applied the CSS module classes to the DatePicker component.

2. Date Format Issues

If the date format isn’t displaying correctly, review the dateFormat prop. Make sure it matches the format you expect. Also, confirm that the toLocaleDateString() or similar methods you use to display the date are using the correct locale, or are formatted as expected.

3. Time Zones

Dates and times can be tricky because of time zones. The react-datepicker component itself doesn’t handle time zone conversions. The date values it provides are standard JavaScript Date objects, which are influenced by the user’s local time zone. When working with dates, consider these points:

• Server-Side Storage: Store dates in a consistent format (e.g., UTC) on your server.
• Time Zone Conversion: Use a library like date-fns-tz to convert dates between time zones in your application. You’ll need to install it: npm install date-fns-tz or yarn add date-fns-tz
• Displaying Dates: When displaying dates to the user, convert them to their local time zone using the appropriate conversion functions.

Example using date-fns-tz:

import { format, toDate } from 'date-fns-tz';

// Assuming you have a date from the datepicker, e.g., selectedDate
const dateInUTC = selectedDate;

// Convert to a specific timezone (e.g., 'America/Los_Angeles')
const dateInLosAngeles = toDate(dateInUTC, {timeZone: 'America/Los_Angeles'});

// Format the date for display
const formattedDate = format(dateInLosAngeles, 'MMMM dd, yyyy', { timeZone: 'America/Los_Angeles' });

4. Performance

While react-datepicker is generally performant, consider these tips:

• Memoization: If you’re passing complex props to the DatePicker component, memoize them to prevent unnecessary re-renders. Use React.memo or useMemo.
• Lazy Loading: If you’re using the date picker on a page with many other components, consider lazy-loading the date picker to improve initial page load time.
• Optimize Date Manipulation: Use efficient date manipulation libraries (like date-fns) to avoid performance bottlenecks, especially when dealing with large datasets or complex calculations.

Advanced Customization

Beyond the basics, you can further customize react-datepicker:

1. Custom Input

You can provide a custom input component using the renderInput prop. This allows you to completely control the input field’s appearance and behavior.

import React, { useState } from 'react';

import DatePicker from 'react-datepicker';

import 'react-datepicker/dist/react-datepicker.css';

function Home() {

  const [selectedDate, setSelectedDate] = useState(null);
  const CustomInput = ({ value, onClick }) => (

    <button className="example-custom-input" onClick={onClick}>

      {value || "Click to select a date
Facebook
Share on X
LinkedIn
WhatsApp
Email
Copy Link