如何接收用户'；输入日期并将其与date（）javascript函数匹配？

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

这是我做这件事的失败尝试。如有任何帮助，将不胜感激：

我如何接收用户输入：

<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>;

如何在正确的位置（今天、明天等）显示事件。我确信这是错误的，因为如果今天的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>;

今天
{this.state.events&&
this.state.events.map（数据=>{
if（date.getUTCDate（）==data.day&&date.getMonth（）==data.month）{
返回；
}
})}
;
明天

{this.state.events&&
this.state.events.map（数据=>{
如果(
date.getUTCDate（）+1==data.day&&
date.getMonth（）==data.month
) {
返回；
}
})}
;

您可以使用

新日期（年、月、日+1）

从新的（明天）日期创建一个新对象，这将返回一个带有明天日期的新日期对象。有关更多信息，请查看有关的官方MDN文档

let today=新日期（）；
让明天=新日期（today.getFullYear（）、today.getMonth（）、today.getDate（）+1）；
console.log（today.getDate（））；//得到今天的约会
console.log（明天.getDate（））；//获取明天的日期

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

开始日期：

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

<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>;