如何在 Next.js 中添加简单的 DatePicker？

在本文中，我们将学习如何在 NextJs 中添加一个简单的 Datepicker。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：要添加我们的 DatePicker，我们将使用 react-datepicker 包。 react-datepicker 包可帮助我们在应用程序的任何位置添加 DatePicker。所以首先，我们将安装 react-datepicker 包，然后我们将在我们的主页上添加一个 DatePicker。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 react-datepicker 包：

npm i react-datepicker

项目结构：看起来像这样

添加 DatePicker：安装 react-datepicker 包后，我们可以很容易地在我们的应用中添加 DatePicker。对于此示例，我们将 DatePicker 添加到我们的主页。

将以下内容添加到文件：

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 (
    

      
GeeksforGeeks - DatePicker
       setStartDate(date)} />
    
  );
}

说明：在上面的例子中，我们首先从已安装的包中导入 DatePocker，并从 react 中导入 useState 钩子。之后，我们使用创建一个常量变量并使用 useState 挂钩来存储值。然后我们将使用 DatePicker 组件添加我们的日期选择器。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

输出：