时间戳

首页 > 解决方案 > 无法将日期范围插入多个选择选项标签

javascript - 无法将日期范围插入多个选择选项标签

问题描述


    <?php
       require_once('dbconfig.php');
       $sql = "SELECT * FROM kpi_detail";
       $result = $conn->query($sql);
       while($row = $result->fetch_assoc()){
       ?>
       <tbody>
           <tr id="<?php echo $row['id'] ?>">
           <td><?php echo $row['id'] ?></td>
           <td><?php echo $row['kpi_name'] ?></td>
           <td><?php echo $row['target'] ?></td>
           <td><?php echo $row['current_data'] ?></td>
           <td><input type="text" id="dt1" value="<?php echo $row['start_date'] ?>"></td>
           <td><input type="text" id="dt2" value="<?php echo $row['end_date'] ?>"></td>
           <td><button type="submit" onclick="SubmitDate();">Save</button></td>
           <td><select name="DateList"><option selected>Select date</option></select></td>
       </tr>
     </tbody>
       <?php } ?></table>
       <script type="text/javascript">

        var startDate = new Date($('#dt1').val()); //YYYY-MM-DD
        var endDate = new Date($('#dt2').val()); //YYYY-MM-DD
        console.log($('#dt1').val());
        var getDateArray = function(start, end) {
        var arr = new Array();
        var dt = new Date(start);
        while (dt <= end) {
            arr.push(new Date(dt));
            dt.setDate(dt.getDate() + 1);
        }
        return arr;
    }

        var dateArr = getDateArray(startDate, endDate);

        var sel =  document.querySelector("select[name='DateList']");
        for (var i = 0; i < dateArr.length; i++) {
        var opt = document.createElement('option');
        opt.innerHTML = dateArr[i].toLocaleDateString("en-US");
        opt.value = dateArr[i].toLocaleDateString("en-US");
        sel.appendChild(opt);
    }

    </script>

在我插入第一个数据并在表单中选择开始日期和结束日期后，开始日期和结束日期的值将存储在日期 Arr JavaScript 变量中。如果我在表单中插入另一个数据并选择开始日期和结束日期，则以后的第二个数据将不会收到开始日期到结束日期的日期。需要一个解决方案来获取我选择的每个日期值并插入选择选项值。 在此处输入图像描述 在此处 输入图像描述

标签： javascriptphphtml

解决方案

在您的 PHP 中：

<td>
    <input type="text" class="startDate" value="<?php echo $row['start_date'] ?>">
</td>
<td>
    <input type="text" class="endDate" value="<?php echo $row['end_date'] ?>">
</td>

在你的 JS 中：

   var getDateArray = function (start, end) {
        var arr = new Array();
        var dt = new Date(start);
        end = new Date(end);
        while (dt <= end) {
            arr.push(new Date(dt));
            dt.setDate(dt.getDate() + 1);
        }
        return arr;
    };

    $("tr").each(
        function (index) {
            var startDate = $(this).find('.startDate').attr('value');
            var endDate = $(this).find('.endDate').attr('value');
            var dateArr = getDateArray(startDate, endDate);
            var sel = $(this).find("select[name='DateList']");
            for (var i = 0; i < dateArr.length; i++) {
                var value = dateArr[i].toLocaleDateString("en-US");
                var opt = new Option(value, value);
                sel.append(opt);
            }
        }
    );

您的代码中有几个问题需要解决：您不应该对不同的元素使用相同的 ID。tbody 元素也应该在循环之外。

推荐阅读