如何在 ReactJS 中创建日期选择器？

ReactJS 是一款流行的 JavaScript 库，常用于构建用户界面。创建日期选择器是我们在使用 ReactJS 时经常需要处理的任务之一。在本文中，我们将介绍如何使用 ReactJS 创建日期选择器。

使用第三方库

为了简化日期选择器的开发过程，我们可以使用许多可用的 ReactJS 第三方库。其中，React Datepicker 和 React Day Picker 是两个非常流行的日期选择器库。

React Datepicker

React Datepicker 是一个简单易用的日期选择器库，它允许您定义格式、提供周选项、具有多种语言支持等功能。

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

function App() {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div className="App">
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        dateFormat="dd/MM/yyyy"
      />
    </div>
  );
}

export default App;

React Day Picker

React Day Picker 是一个快速灵活的日期选择器库，可以自定义样式和行为，支持许多选项。

import React, { useState } from "react";
import DayPickerInput from "react-day-picker/DayPickerInput";
import "react-day-picker/lib/style.css";

function App() {
  const [selectedDay, setSelectedDay] = useState();

  return (
    <div>
      <DayPickerInput onDayChange={(day) => setSelectedDay(day)} />
      {selectedDay && <p>You selected {selectedDay.toLocaleDateString()}</p>}
    </div>
  );
}

export default App;

手写日期选择器

如果您需要更详细的控制日期选择器的外观和行为，则可以手动编写日期选择器。在下面的示例中，我们将创建一个简单的日期选择器，它允许用户选择月份和年份。

import React, { useState } from "react";

function App() {
  const [month, setMonth] = useState(new Date().getMonth() + 1);
  const [year, setYear] = useState(new Date().getFullYear());

  const getDaysInMonth = (month, year) => {
    return new Date(year, month, 0).getDate();
  };

  const handleYearChange = (event) => {
    setYear(parseInt(event.target.value));
  };

  const handleMonthChange = (event) => {
    setMonth(parseInt(event.target.value));
  };

  const daysInMonth = getDaysInMonth(month, year);

  const daysArray = [...Array(daysInMonth).keys()].map((i) => i + 1);

  return (
    <div>
      <div>
        <select value={month} onChange={handleMonthChange}>
          {[...Array(12).keys()].map((i) => (
            <option value={i + 1}>{i + 1}</option>
          ))}
        </select>

        <select value={year} onChange={handleYearChange}>
          {[...Array(10).keys()].map((i) => (
            <option value={year + i}>{year + i}</option>
          ))}
        </select>
      </div>

      <div>
        {daysArray.map((day) => (
          <button>{day}</button>
        ))}
      </div>
    </div>
  );
}

export default App;

结论

ReactJS 中创建日期选择器非常容易，并且有许多第三方库可以帮助您快速实现此功能。如果您需要更高的灵活性和控制性，则可以手动编写日期选择器。无论哪种方法，它们都可以轻松地集成到您的 ReactJS 应用程序中。