jQuery 基于用户输入的多个开始和结束日期

Question

我正在使用一些较旧的代码，我想看看是否有一种方法可以让用户在文本框中输入一个数字，当点击创建按钮时，它会生成给定数量的开始和结束日期。以下代码大部分工作，但新创建的日期字段不会填充日历。我觉得这是因为页面已经加载，我只是将文本附加到已加载页面的末尾。是否有解决此问题的方法，是否可以确定提交时哪些日期属于哪个代码块？

我会根据需要更新。

据我所知，代码库使用的是 jQuery v1.8 和 jQuery-ui v1.8，因此它们已经很老了。

例如，如果我输入数字 2，我会得到以下代码中的两个生成两次。

HTML

       <tr>
        <td class="DisplayFieldName">
            # of dates
        </td>
        <td class="DisplayFieldData" style="padding: 0px 0px 0px 5px;">
            <input type="text" name="numOfDates" id="numOfDates" value="0" />
            <button class="numOfDatesBtn" id="numOfDatesBtn" type="button">Add Dates</button>
        </td>
    </tr>
    <tr>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;" align="right">
            <label>Period</label>
        </th>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;">
            <label>Start</label>
        </th>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;"></th>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;">
            <label>End</label>
        </th>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;"></th>
    </tr>

    <tr>
        <td>User 1: </td>
        <td>@Html.CheckBox("User1", true)</td>
    </tr>
    <tr>
        <td>user 2: </td>
        <td>@Html.CheckBox("User2", true)</td>
    </tr>
    <tr>
        <td><label for="startDate">Start:</label></td>
        <td><input type="text" name="startDate" value="" id="newStartDate" /></td>
    </tr>
    <tr>
        <td><label for="startDate">Buy It Not:</label></td>
        <td><input type="text" name="buyitnow" value="" id="buyItNowDate" /></td>

        <td><input type="text" name="butitnow" value="" id="buyItNowEndDate" /></td>
    </tr>
    <tr>
        <td><label for="endDate">End:</label></td>
        <td></td>
        <td><input type="text" name="endDate" value="" id="newEndDate" /></td>
    </tr>

JavaScrpt/jQuery

$('#newStartDate').datetimepicker({ dateFormat: "m/dd/yy", timeFormat: "h:mmtt" });
$('#buyItNowDate').datetimepicker({ dateFormat: "m/dd/yy", timeFormat: "h:mmtt" });
$('#buyItNowEndDate').datetimepicker({ dateFormat: "m/dd/yy", timeFormat: "h:mmtt" });
$('#newEndDate').datetimepicker({ dateFormat: "m/dd/yy", timeFormat: "h:mmtt" });

$("#numOfDatesBtn").click(function () {
    var num = parseInt($("#numOfDates").val());

    for (var i = 1; i <= num; i++)
    {                             
        $(wrapper).append(fieldHTML3); //Add field html            
    }

});

var fieldHTML3 = '<tr>'+
                    '<td><label for="startDate">Start:</label></td>'+
                    '<td><input type="text" name="startDate" value="" id="newStartDate" /></td>'+
                '</tr>'+
                '<tr>'+
                    '<td><label for="startDate">Buy It Not:</label></td>'+
                    '<td><input type="text" name="buyitnow" value="" id="buyItNowDate" /></td>'+

                    '<td><input type="text" name="butitnow" value="" id="buyItNowEndDate" /></td>'+
                '</tr>'+
                '<tr>'+
                    '<td><label for="endDate">End:</label></td>'+
                    '<td></td>'+
                    '<td><input type="text" name="endDate" value="" id="newEndDate" /></td>'+
                '</tr>'

Answer 1

考虑以下示例。

$(function() {
  function initDateTime(tObj) {
    tObj.datetimepicker({
      dateFormat: "m/dd/yy",
      timeFormat: "h:mmtt"
    });
  }

  function makenewDateTimePicker(i, tObj) {
    var startRow = $("<tr>").appendTo(tObj);
    var startLabel = $("<td>").html("<label for='start-date-" + i + "'>Start:</label>").appendTo(startRow);
    var startInput = $("<td>").html("<input type='text' id='start-date-" + i + "' />").appendTo(startRow);
    initDateTime($('#start-date-' + i));

    var endRow = $("<tr>").appendTo(tObj);
    var endLabel = $("<td>").html("<label for='end-date-" + i + "'>Start:</label>").appendTo(startRow);
    var endInput = $("<td>").html("<input type='text' id='end-date-" + i + "' />").appendTo(startRow);
    initDateTime($('#end-date-' + i));
  }

  $("#numOfDatesBtn").click(function() {
    var num = parseInt($("#numOfDates").val());
    var c = $("input[id^='start-date']").length;
    c++;
    for (c; c <= num; c++) {
      makenewDateTimePicker(c, $("table"));
    }
  });
});

当我们使用相同的设置初始化每个 DateTimePicker 时，我们可以创建一个快速函数来执行此操作，我们传入一个 jQuery 对象。

当我们想要在 table 中为开始和结束选择器创建新的行和单元格时，我们可以在另一个函数中使用相同的函数。由于我们要迭代一定数量的循环，我们首先要查看是否存在任何现有元素，以便我们可以创建唯一 ID。

jQuery 基于用户输入的多个开始和结束日期

jQuery Multiple start and end Dates based on User Input

javascript

jquery

jquery-ui