如何使用以下代码在输入表单中自动选择当前日期
Posted
技术标签:
【中文标题】如何使用以下代码在输入表单中自动选择当前日期【英文标题】：How to Auto Select Current Date In Input Form with Following Code 【发布时间】：2019-01-04 19:16:24 【问题描述】：我正在尝试在酒店预订管理器中使用之前的代码在输入表单中选择当前日期（日、月、年）。我通过网站拖放构建器 (Webflow) 将代码直接嵌入到我的网页上的 html 代码块中。
我还希望在当前日期后 7 天自动选择出发日期。
我发现这是我正在寻找的最接近的答案，Set current date in form select lists，但不知道如何将它实现到我的相关代码中。
任何帮助将不胜感激。
这是我正在使用的代码：
<form action="https://...." method="POST" name="SearchForm">
<table>
<tbody>
<tr>
<td>
<span>Arrival:</span>
</td>
<td>
<select name="CIM" size="1">
<!-- CIM = CheckInMonth -->
<option value="1" selected>Jan</option>
<option value="2" >Feb</option>
<option value="3" >Mar</option>
<option value="4" >Apr</option>
<option value="5" >May</option>
<option value="6" >Jun</option>
<option value="7" >Jul</option>
<option value="8" >Aug</option>
<option value="9" >Sep</option>
<option value="10" >Oct</option>
<option value="11" >Nov</option>
<option value="12" >Dec</option>
</select>
</td>
<td>
<select name="CID" size="1">
<!-- CID = CheckInDay -->
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" selected>4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</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>
</td>
<td>
<select name="CIY" size="1">
<!-- CIY = CheckInYear -->
<option value="2019" selected>2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
</select>
</td>
<td>
<span>Departure:</span>
</td>
<td>
<select name="COM" size="1">
<!-- COM = CheckOutMonth -->
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</td>
<td>
<select name="COD" size="1">
<!-- COD = CheckOutDay -->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</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>
</td>
<td>
<select name="COY" size="1">
<!-- COY = CheckOutYear -->
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</td>
<td>
...
【问题讨论】：
【参考方案1】：希望这会对您有所帮助。您的 html 的出发部分将如下所示。只需添加相关 id 即可选择标签。
<td>
<span>Departure:</span>
</td>
<td>
<select name="COM" size="1" id="departureMonth">
<!-- COM = CheckOutMonth -->
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</td>
<td>
<select name="COD" size="1" id="departureDay">
<!-- COD = CheckOutDay -->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</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>
</td>
<td>
<select name="COY" size="1" id="departureYear">
<!-- COY = CheckOutYear -->
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</td>
并添加此 javascript+jquery 代码。
var departureDate = new Date();
departureDate.setDate(departureDate.getDate()+7);
$("#departureYear").val(departureDate.getFullYear());
$("#departureMonth").val(departureDate.getMonth());
$("#departureDay").val(departureDate.getDate());
【讨论】：
以上是关于如何使用以下代码在输入表单中自动选择当前日期的主要内容，如果未能解决你的问题，请参考以下文章