如何使用以下代码在输入表单中自动选择当前日期

Posted 2021-03-27

我正在尝试使用酒店预订经理中的此前代码，以输入表格中选择当前日期（日，月，年）。我通过网站拖放构建器（Webflow）直接在我的网页上将代码嵌入到html代码块中。

我还希望出发日期在当前日期后七天自动选择。

我发现这是我正在寻找的最接近的答案，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>

...

答案

希望这会帮助你。 您的html的离开部分将如下所示。只需在select标签中添加相关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());