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

时间:2019-09-15 11:26:54

标签: javascript reactjs

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

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

我如何接收用户输入:

def remove_by_text(self, text):
    for label in self.labels:
        if text in self.children[label]['text']:
            self.children[label].destroy()

我定义了日期变量:

import tkinter as tk


class LabelListbox(tk.Frame):
    # Here define all of the above


class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.menubar = tk.Menu(self)
        self.config(menu=self.menubar)

        lbl_listbox = LabelListbox(self)
        lbl_listbox.grid(row=0, column=0)

        for _ in range(4):
            lbl_listbox.add_label('This is Label {}'.format(_))

        self.menubar.add_command(label='Remove last',
                                 command=lbl_listbox.remove_last)

        self.menubar.add_command(label='Remove by index 1',
                                 command=lambda:lbl_listbox.remove_by_index(1))

        self.menubar.add_command(label='Change Label text"',
                                 command=lambda:lbl_listbox.
                                 configure_text(0, 'The text changed to Label 1'))

        self.menubar.add_command(label='Remove by text "Label 1"',
                                 command=lambda:lbl_listbox.remove_by_text('Label 1'))

if __name__ == '__main__':
    App().mainloop()

我如何在正确的位置(今天,明天等)显示事件。我确定这是错误的,因为如果今天的世界标准时间是31天,那么TOMORROW div会尝试找到32天,当然这并不存在:

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

2 个答案:

答案 0 :(得分:0)

您可以使用new Date(year, month, day + 1)从新(明天)日期创建一个新对象,这将返回带有明天日期的新Date对象。有关更多信息,请查看有关Date object的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

答案 1 :(得分:0)

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天