如何在 React js 中获取范围内的所有日期 - TypeScript

有时，您需要获取给定范围内的所有日期，以便在 React 应用程序中进行处理或显示。以下是一种使用 TypeScript 的方法，可以帮助您实现这样的功能。

步骤

1. 首先，您需要定义一个函数，该函数将返回指定范围内的日期数组。以下是示例代码：

function getDates(startDate: Date, endDate: Date): Date[] {
  const dates = [];
  let currentDate = startDate;
  while (currentDate <= endDate) {
    dates.push(new Date(currentDate));
    currentDate.setDate(currentDate.getDate() + 1);
  }
  return dates;
}

此函数采用开始日期和结束日期作为参数，并返回这两个日期之间每个日期的数组。它首先创建一个空数组，并使用 while 循环遍历每个日期。在 while 循环中，它使用 push() 将当前日期添加到数组中，并使用 setDate() 方法将当前日期的天数增加 1。

2. 接下来，您可以在 React 组件中使用此函数。以下是示例组件：

import React, { useState } from 'react';

interface DateRangePickerProps {
  defaultStartDate?: Date;
  defaultEndDate?: Date;
  onRangeChange?: (startDate: Date, endDate: Date) => void;
}

const DateRangePicker: React.FC<DateRangePickerProps> = ({
  defaultStartDate = new Date(),
  defaultEndDate = new Date(),
  onRangeChange,
}) => {
  const [startDate, setStartDate] = useState(defaultStartDate);
  const [endDate, setEndDate] = useState(defaultEndDate);

  const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setStartDate(new Date(event.target.value));
  };

  const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setEndDate(new Date(event.target.value));
  };

  const handleRangeChange = () => {
    const dates = getDates(startDate, endDate);
    if (onRangeChange) {
      onRangeChange(startDate, endDate);
    }
  };

  return (
    <div>
      <label htmlFor="start-date">Start Date:</label>
      <input type="date" id="start-date" value={startDate.toISOString().substring(0, 10)} onChange={handleStartDateChange} />

      <label htmlFor="end-date">End Date:</label>
      <input type="date" id="end-date" value={endDate.toISOString().substring(0, 10)} onChange={handleEndDateChange} />

      <button type="button" onClick={handleRangeChange}>
        Get Range
      </button>
    </div>
  );
};

export default DateRangePicker;

此组件采用默认的开始日期和结束日期作为可选属性。它使用 useState() 钩子来管理 startDate 和 endDate 状态，并提供了两个 onChange 处理函数，以响应日期输入的更改。它还提供了一个 onRangeChange 属性，它将在日期范围变化时调用，并传递更新的开始和结束日期。最后，它呈现了两个日期输入，并在单击按钮时调用 handleRangeChange() 函数，该函数调用 getDates() 函数，并调用 onRangeChange() 回调（如果存在）。

结论

使用这种方法，您可以很容易地获取指定范围内的所有日期，并将其用于在 React 应用程序中显示或处理。注意，此方法不包括开始日期或结束日期，因为它只返回它们之间的日期。如果需要包括开始或结束日期，请在处理日期数组时自行添加它们。