Set startDate on dynamic datepicker

Question

I have dynamically created html table using jquery which contains 3rows with input textboxes.The fields of the table are

SlNo        Fee          ST       TotalAmt       DueDate

On the first row startDate of DueDate should be the current date.

On the second row startDate of DueDate should be previously(date of first row) selected date.

On the third row startDate of DueDate should be previously(date of second row) selected date

Jquery for dynamically created 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 dynamic datepicker

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

});

This is what I have tried.I am getting the desired result on the first attempt.But on resetting the textbox value of the first row makes the start date of the second row to the newDate

Answer 1

You need to handle the changeDate event of the datepicker to update the startDate values in the other datepickers.

Note that I am assuming your using this datepicker

Start by initializing and setting the default startDate value in your script that dynamically creates the table and include a variable to store all datepickers to make selection easier, then handle the changeDate event to update all datepickers after this one.

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

And finally, remove your $(document).on('focus', ".dueDate", function () { function and the hidden input