React.js-如何为输入日期类型设置默认值

Question

我想将默认日期设置为从浏览器中打开日期选择器的今天起的3天。我该如何实现？

<input id="dateRequired" type="date" name="dateRequired" />

Answer 1

您需要设置日期输入的 defaultValue 属性，如下yyyy-mm-dd所示：

const today = new Date();
const numberOfDaysToAdd = 3;
const date = today.setDate(today.getDate() + numberOfDaysToAdd); 
const defaultValue = new Date(date).toISOString().split('T')[0] // yyyy-mm-dd

<input id="dateRequired" type="date" name="dateRequired" defaultValue={defaultValue} />

这是一个工作示例： https://codesandbox.io/s/gracious-christian-22czv ?file=/src/App.js:326-346

2022答案

您可以将toLocaleDateString与区域设置一起使用来获取格式的日期字符串yyyy-mm-dd。

const today = new Date();
const numberOfDaysToAdd = 3;
const date = today.setDate(today.getDate() + numberOfDaysToAdd); 
const defaultValue = new Date(date).toISOString().split('T')[0] // yyyy-mm-dd

<input id="dateRequired" type="date" name="dateRequired" defaultValue={defaultValue} />

class App extends React.Component {

  render() {
    const date = new Date();
    const futureDate = date.getDate() + 3;
    date.setDate(futureDate);
    const defaultValue = date.toLocaleDateString('en-CA');

    return (
      <input id="dateRequired" type="date" name="dateRequired" defaultValue={defaultValue} />
    );
  }
}

ReactDOM.render(
  <App />,
  document.body
);

Answer 2

您需要将日期转换为iso字符串并获取前10个字符。这是处理您问题的代码代码：

var curr = new Date();
curr.setDate(curr.getDate() + 3);
var date = curr.toISOString().substr(0,10);
<input id="dateRequired" type="date" name="dateRequired" defaultValue={date} /> 

引用ISOString方法。你也可以在这里看到结果