Question

我正在尝试设置一个具有日期+时间的DatePicker，但是在加载初始日期选择器时，时间输入显示为6 PM（即使在检查元素时，也显示value = 18:00）。当我选择默认值为6 PM时，所选值将打印12 AM。有没有一种方法可以将日期选择器输入中的开始时间仅注入/设置为12 AM？我想使这段代码尽可能简单。

我正在使用标准的日期选择器道具和一个用于handleChange的函数，但是当我尝试将selected道具设置为setHours(setMinutes(new Date(), 0), 0)时，它看起来像在我换成另一个时会断裂日期/时间。

这是我要修改的reactdatepicker网页上的通用代码。我的看上去略有不同，但只想设置时间输入：

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

我也尝试过对document.getElementsByName("time-input")[0].setAttribute("value", "00:00")进行硬编码，但这是行不通的。任何人可能拥有的任何想法都会有所帮助，因为我与React的合作并不多。

Answer 1

只需更新从datepicker组件收到的日期对象，然后以所需的方式更改它即可。然后，更新您的钩子状态。

const YourComponent = () => {
  const [startDate, setStartDate] = useState(new Date());
  handleDateChange = (date) => {
    date.setHours(0, 0, 0, 0);
    setStartDate(date);
  };
  return (
    <DatePicker
      selected={startDate}
      onChange={handleDateChange}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

希望有帮助。

设置反应日期选择器时间输入开始时间但未选择

1 个答案: