如何接收用户的输入日期并将其与 date() javascript 函数匹配？

Question

我正在尝试创建一个简单的日历/事件应用程序。 用户应该能够输入事件的日期，然后事件将以正确的日期显示。

这是我失败的尝试。任何帮助将不胜感激：

我如何接收用户的输入：

<div className="event">
<select
className="dateDropdown"
onChange={this.props.handleChange}
name={this.props.day}
>
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select
className="dateDropdown"
name={this.props.month}
onChange={this.props.handleChange}
>
<option value="">Month</option>
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sept</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
<select className="dateDropdown" onChange={this.props.handleChange}>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>;

我定义了日期变量：

let date = new Date();

我如何在正确的位置(今天、明天等(显示事件。我确定这是错误的，因为如果今天的 UTC 日是 31，明天div 将尝试找到第 32 天，这当然不存在：

<div className="dayDiv">
<p className="text day">TODAY</p>
<div className="eventsDiv">
{this.state.events &&
this.state.events.map(data => {
if (date.getUTCDate() === data.day && date.getMonth() === data.month) {
return <Event data={data} />;
}
})}
</div>
</div>;
<div className="dayDiv">
<p className="text day">TOMORROW</p>
<div className="eventsDiv">
{this.state.events &&
this.state.events.map(data => {
if (
date.getUTCDate() + 1 === data.day &&
date.getMonth() === data.month
) {
return <Event data={data} />;
}
})}
</div>
</div>;

Answer 1

您可以使用new Date(year, month, day + 1)从新的(明天(日期创建一个新对象，这将返回一个包含明天日期的新 Date 对象。有关更多信息，请查看有关 Date 对象的官方 MDN 文档。

let today = new Date();
let tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
console.log(today.getDate()); // Getting today's date
console.log(tomorrow.getDate()); // Getting tomorrow's date

Answer 2

HTML5 中的日期有一个专用的输入类型，它具有以下语法：

<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
value="2018-07-22"
min="2018-01-01" max="2018-12-31" />

这将帮助您使用事件组件获取有效日期，因为它可以处理所有与日期相关的东西，例如月份是 28、29、30 还是 31 天