在动态datepicker上设置startDate

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

SlNo Fee ST TotalAmt DueDate 

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

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

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

Jquery用于动态创建的表

  var $tbody = $("#tblPaymentDetails tbody"); $($tbody).html(''); for (var i = 0; i < 3; i++) { var slno = parseInt(i + 1); var $row = $(''); $row.append(' ' + slno + ''); $row.append(' '); $row.append(' '); $row.append('  '); $row.append(' '); $tbody.append($row); } 

Jquery动态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); }); }); 

这就是我试过的。我在第一次尝试时得到了想要的结果。但是重置first row的textbox value会使second row的start date变为newDate

Answer 1

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

请注意，我假设您使用此日期选择器

首先在脚本中初始化并设置默认的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 () { function和隐藏输入