Way to Add Simple DatePicker in Next.js

A DatePicker allows users to easily select a date from a calendar instead of entering it manually. In Next.js, you can quickly add a DatePicker using the react-datepicker package.

Approach

To add a DatePicker in a Next.js application, we are going to use the react-datepicker package. This package provides a simple and customizable calendar component. First, install the package, then import the DatePicker component and use it inside your page.

Steps To Add Simple DatePicker in Next.js

Prerequisite: Before following this tutorial, make sure you have already created a Next.js project. If not, refer to the Next.js Installation and First Application article.

Step 1: Install the required package

Run the following command inside your project directory:

npm install react-datepicker

Project Structure:

It will look like this

Step 2: Add the DatePicker

Open the src/app/page.js file and add the following code.

// File Path: src/app/page.js
"use client";
import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function Home() {
    const [selectedDate, setSelectedDate] = useState(new Date());
    return (
        <main
            style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                minHeight: "100vh",
                gap: "20px",
            }}
        >
            <h2>
                GeeksforGeeks - DataPicker
            </h2>
            <DatePicker
                selected={selectedDate}
                onChange={(date) =>
                    setSelectedDate(date)
                }
            />
        </main>
    );
}

Explanation: Here, we first import the DatePicker component from the installed package and the useState() hook from React. We then create a state variable to store the selected date. The DatePicker component displays a calendar, and whenever a user selects a date, the selected value is updated using the onChange() function.

Step 3: Run the Application:

Run the below command in the terminal to run the app.

npm run dev

Output: