在动态日期选择器上设置开始日期

Question

我使用 jquery 动态创建了 html table，其中包含 3 行 table 的输入 textboxes.The 字段是

SlNo        Fee          ST       TotalAmt       DueDate

DueDate 的第一行 startDate 应该是当前日期。

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

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

Jquery 用于动态创建 table

 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);

    }

Jquery 动态日期选择器

$(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);
    });

});

这就是我所拥有的 tried.I 在重置 first row 的 textbox value 时，我在第一个 attempt.But 上得到了想要的结果，使得 start date从 second row 到 newDate

Answer 1

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

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

首先在动态创建 table 的脚本中初始化和设置默认 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 () { 函数和隐藏的输入

在动态日期选择器上设置开始日期

Set startDate on dynamic datepicker

jquery

bootstrap-datepicker