How to add simple DatePicker in Next.js ?

In this article, we are going to learn how we can add a Simple Datepicker in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.

Approach: To add our DatePicker we are going to use the react-datepicker package. The react-datepicker package helps us to add a DatePicker anywhere in our app. So first, we will install the react-datepicker package and then we will add a DatePicker on our homepage.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

Install the required package: Now we will install the react-datepicker package using the below command:

npm i react-datepicker

Project Structure: It will look like this

Adding the DatePicker: We can easily add the DatePicker in our app after installing the react-datepicker package. For this example, we are going to add the DatePicker to our homepage.

Add the below content in the file:

index.js

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

export default function GfgDatePicker() {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div>
      <h4>GeeksforGeeks - DatePicker</h4>
      <DatePicker selected={startDate} onChange=
              {(date) => setStartDate(date)} />
    </div>
  );
}

Explanation: In the above example first, we are importing the DatePocker from the installed package and useState hook from react. After that, we are using creating a constant variable and used the useState hook to store the values. Then we will add our datepicker using the DatePicker component.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: