React中如何设置Flatpickr默认时间为当前时间减1个月

你的Flatpickr是受控用法，显示值完全由绑定的dateFrom状态控制，不需要额外在组件options里加配置，只要把dateFrom的初始值设置为当前时间往前推1个月的日期对象，页面加载时组件就会默认显示这个时间。

操作步骤 #

• 写一个简单的日期计算逻辑：基于当前时间生成Date对象，调用setMonth方法将月份减1即可，JS会自动处理跨月边界（比如3月31日往前推1个月会自动转为2月的最后一个有效日期，不会出现非法日期值）
• 将dateFrom状态的初始值从原来的new Date(0)（即你代码中判断getTime() === 0对应的空值初始状态）替换为上面计算出的1个月前的日期
• 原有组件的value判断、onChange逻辑都可以保留，不影响后续选值、清空的功能

完整代码参考 #

import { useState } from 'react';
import Flatpickr from 'react-flatpickr';

// 生成1个月前的日期
const getLastMonthDate = () => {
  const date = new Date();
  date.setMonth(date.getMonth() - 1);
  return date;
};

function DateSelector() {
  // 初始化状态时直接传入计算好的默认值
  const [dateFrom, setDateFrom] = useState(getLastMonthDate());

  return (
    <Flatpickr
      options={{
        enableTime: true,
        dateFormat: "Y-m-d H:i",
      }}
      id="fromDate"
      value={dateFrom.getTime() === 0 ? '' : dateFrom}
      onChange={([date]) => {
        setDateFrom(date);
      }}
    />
  );
}

避坑提示：不要在options里配置defaultDate属性。受控模式下组件的显示值完全由React状态驱动，配置defaultDate会导致初始渲染值和状态不同步，出现显示异常。

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