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

在 Next.js 中添加 DatePicker 需要使用第三方库，比较常用的是 react-datepicker。这个库可以帮助我们快速创建一个日期选择器，并可以根据需求进行样式自定义等操作。

Step 1 - 安装 react-datepicker

在终端中输入以下命令安装 react-datepicker：

npm install react-datepicker

Step 2 - 导入并使用 DatePicker

在需要使用 DatePicker 的组件中导入 DatePicker：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

然后创建一个 state，用来保存选取的日期：

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

最后在 render 方法中使用 DatePicker 组件：

<DatePicker selected={selectedDate} onChange={date => setSelectedDate(date)} />

这个代码片段创建了一个可以选择日期的组件，它会根据用户的输入更新 state 里的 selectedDate。需要注意的是，我们在 onChange 中更新了 state，这样会触发组件重新渲染，从而更新用户界面。

Step 3 - 样式自定义

react-datepicker 的样式可以通过修改 CSS 文件进行自定义。可以使用 styled-components 等库来快速编辑 CSS。

Step 4 - DatePicker 的更多设置

除了上述基本用法，react-datepicker 还提供了更多自定义设置。比如：

• 设置默认日期：可以使用 defaultValue 属性。
• 可选择日期范围：可以使用 minDate 和 maxDate 属性。
• 日期格式化：可以使用 dateFormat 属性。

具体使用方法可以查看 react-datepicker 文档。

完整代码

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { useState } from "react";

export default function MyDatePicker() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
    />
  );
}