JavaScript日期相减返回0或null，React倒计时组件日期差值计算异常

你遇到的日期相减返回全0、传参异常的问题有三个核心原因：

• 过去日期差值为负：如果用早于当前时间的日期和当前时间做减法，得到的时间差为负数，react-countdown默认已过期的倒计时会直接展示全0。
• 月份索引规则错误：JS Date对象的月份索引从0开始计算，你写的new Date(2021, 6, 10)实际对应的是2021年7月10日，本身就是已经过期的日期，相减自然得到负数。
• 传参格式错误：new Date(2021, 6, 10) + Date.now()属于非法传参。JS中Date对象与数值做加法时，会先将Date隐式转为字符串，最终得到的是「日期字符串+时间戳数字」的拼接结果，react-countdown无法识别该值，会默认以当前时间为截止时间，差值为0。

1. 基础倒计时修复 #

如果你要实现到指定日期的倒计时，直接给date参数传未来的目标Date对象/对应时间戳即可，不需要和当前时间做加减：

// 示例：倒计时到2025年7月10日
<Countdown date={new Date(2025, 6, 10)} />

2. 对接用户输入日期的完整实现 #

要实现用户输入日期后计算倒计时，需要绑定输入框的值，处理表单提交逻辑，示例代码如下：

import "./App.css";
import Countdown from "react-countdown";
import { useState } from "react";

function App() {
  // 存储用户选择的目标日期
  const [targetDate, setTargetDate] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const dateInput = e.target.querySelector('input[type="date"]').value;
    if (!dateInput) return;
    // 将输入的YYYY-MM-DD格式转为Date对象
    const [year, month, day] = dateInput.split('-').map(Number);
    // 月份要减1，符合JS Date的索引规则
    setTargetDate(new Date(year, month - 1, day));
  };

  return (
    <div className="App">
      <h1>日期倒计时</h1>
      <form onSubmit={handleSubmit}>
        <input type="date" />
        <button type="submit">开始倒计时</button>
      </form>
      {/* 只有选择了日期才展示倒计时 */}
      {targetDate && <Countdown date={targetDate} />}
    </div>
  );
}

3. 自定义年月日时分秒格式 #

如果要按「年、月、日、时、分、秒」的格式展示，需要自定义渲染器：

// 自定义渲染函数
const renderer = ({ years, months, days, hours, minutes, seconds, completed }) => {
  if (completed) {
    return <span>倒计时已结束</span>;
  }
  return <span>{years}年{months}月{days}日 {hours}:{minutes}:{seconds}</span>;
};

// 使用时传入renderer参数
<Countdown date={targetDate} renderer={renderer} />

内容的提问来源于stack exchange，提问作者Sai Krishnadas