HTML input date All In One
input type="date"
value === default value
You can set a default value for the input with a date inside the value attribute, like so:
<input type="date" value="2023-01-01" />
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start" value="2023-10-01" min="2023-01-01" max="2023-12-31" />
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#value
error
react.js
input=datedefaultValue not updating bug ❌
input=date 无法设置 defaultValue ❌
return (
<div className="App">
<input
key={new Date().toDateString()}
defaultValue={new Date().toDateString()}
type="date"
onChange={handleDate}
/>
<hr />
<DatePicker
format="dd/MM/yyyy"
minDate={minDate}
maxDate={maxDate}
value={date}
/>
</div>
);
return (
<div className="App">
<input
key={new Date().toDateString()}
value={new Date().toDateString()}
type="date"
onChange={handleDate}
/>
{/* <input
key={new Date().toDateString()}
defaultValue={new Date().toDateString()}
type="date"
onChange={handleDate}
/> */}
<hr />
<DatePicker
format="dd/MM/yyyy"
minDate={minDate}
maxDate={maxDate}
value={date}
/>
</div>
);
solution
still bug ???
return (
<div className="App">
<input
key={new Date(date).toDateString()}
value={new Date(date).toDateString()}
type="date"
onChange={handleDate}
/>
{/* <input
key={new Date().toDateString()}
defaultValue={new Date().toDateString()}
type="date"
onChange={handleDate}
/> */}
<hr />
<DatePicker
format="dd/MM/yyyy"
minDate={minDate}
maxDate={maxDate}
value={date}
/>
</div>
);
demos
https://codesandbox.io/s/great-benz-w373n8?file=/src/App.js
(? 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！
refs
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 ?️，侵权必究⚠️！