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
You need to handle the
changeDate
event of the datepicker to update thestartDate
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 thechangeDate
event to update all datepickers after this one.And finally, remove your
$(document).on('focus', ".dueDate", function () {
function and the hidden input