reactjs 如何直接操作已形成的日期字符串

kxxlusnw  于 2023-03-22  发布在  React
关注(0)|答案(1)|浏览(164)

我使用React日期选择器,以允许用户选择“从日期”和“到日期”
“2023-03-13T15:30:42.000Z”“2023-03-14T15:30:42.000Z”
我如何在当天将from time默认为00:00:00.000 aka midnight,并在当天将to time默认为23:59:59:999
想法是使用这2个时间作为“数据过滤器”,以捕获这2个时间戳内所有有效负载
预期时间设置正确,但系统不同,在维护更改日期时使用当前时间

atmip9wb

atmip9wb1#

你可以做这样的事

const {
  useState
} = React;

const DateRangeSelector = () => {
  const [startDate, setStartDate] = useState(
    new Date().toISOString().slice(0, 10) + 'T00:00:00.000Z'
  );
  const [endDate, setEndDate] = useState(
    new Date().toISOString().slice(0, 10) + 'T23:59:59:999Z'
  );
  const onDateChange = (e) => {
    
    e.target.name === 'start' ?
      setStartDate(e.target.value + 'T00:00:00.000Z') :
      setEndDate(e.target.value + 'T23:59:59:999Z');
  };

  return (
    <div>
      <br />
      Start:&nbsp;
      <input
        name="start"
        type="date"
        value={startDate.slice(0, 10)}
        max={endDate}
        onChange={onDateChange}
      />
      End:&nbsp;
      <input
        name="end"
        type="date"
        value={endDate.slice(0, 10)}
        min={startDate}
        onChange={onDateChange}
      />
      <br />
      StartDate:&nbsp;{startDate} <br />
      EndDate:&nbsp;{endDate}
    </div>
  );
}

ReactDOM.createRoot(
  document.getElementById("root")
).render( <
  DateRangeSelector / >
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

相关问题