Question

我使用jquery动态创建了html表，其中包含带有输入文本框的3个。表的字段为

name='employee_nrc'

SlNo Fee ST TotalAmt DueDate的{{1}}的第一行应该是当前日期。

在startDate的第二行DueDate应该是之前（第一行的日期）所选日期。

在startDate的第三行DueDate应该是之前（第二行的日期）所选日期

动态创建表的Jquery

startDate

Jquery动态日期选择器

DueDate

这就是我尝试过的。我在第一次尝试时获得了所需的结果。但重置var $tbody = $("#tblPaymentDetails tbody"); $($tbody).html(''); for (var i = 0; i < 3; i++) { var slno = parseInt(i + 1); var $row = $('<tr/>'); $row.append(' <td class="slno">' + slno + '</td>'); $row.append(' <td><input name="StudentReceipt[' + i + '].Fee" type="text" class="form-control" /></td>'); $row.append(' <td><input name="StudentReceipt[' + i + '].ST" type="text" class="form-control " /></td>'); $row.append(' <td><input name="StudentReceipt[' + i + '].Total" type="text" class="form-control " /> </td>'); $row.append(' <td><input id="txtDueDate'+i+'" name="StudentReceipt[' + i + '].DueDate" type="text" class="form-control duedate" /></td>'); $tbody.append($row); }的{{1}}会使$(document).on('focus', ".dueDate", function () { var currentDatepickerId = $(this).attr("id"); var currMinDate=""; //For first datepicker if (currentDatepickerId == "txtDueDate0") { currMinDate=new Date() } else { //gets the last selected date from the hiddenfield var selectedDate = $("#selectedDate").val().split("/"); currMinDate = new Date(selectedDate[2], selectedDate[0] - 1, selectedDate[1]); } $(this).datepicker({ autoclose: true, startDate: currMinDate }).on("change", function (evt) { var currValue = $(this).val(); //stores the currently selected value to hiddenfield $("#selectedDate").val(currValue); }); });成为textbox value到first row

Answer 1

您需要处理日期选择器的changeDate事件，以更新其他日期选择器中的startDate值。

请注意，我假设您正在使用this datepicker

首先在脚本中初始化并设置默认startDate值，该值动态创建表并包含一个变量来存储所有日期选择器以便于选择，然后处理changeDate事件以更新所有日期选择器在这之后。

var datepickers; // declare this as global variable

// your function to create the table
{
    for (var i = 0; i < 3; i++) {
        ....
        $tbody.append($row);
    }
    // store the datepicker elements
    datepickers = $tbody.find('.duedate');
    console.log(datepickers.length); // should return '3'
    // attach the datepicker plugin to each element
    $('.duedate').datepicker({
        autoclose: true,
        startDate: '+0d' // set default to today's date
    }).on('changeDate', function(e) {
        console.log(e.date); // should return the selected date
        var index = datepickers.index($(this)); // should return '1' if you selected the datepicker in the second row
        // loop through all the datepickers after this one
        for(var i = index + 1; i < datepickers.length; i++) {
            // set the startDate based on the date of this one
            datepickers.eq(i).datepicker('setStartDate', e.date);
        }
    });
}

最后，删除您的$(document).on('focus', ".dueDate", function () {功能和隐藏的输入

在动态datepicker上设置startDate

1 个答案: