如何为多个输入加载具有不同日期范围的datetimepicker

Question

我希望每个框中都有新的日期范围，但它只返回最后一个文本框的日期范围。我也使文本框id的动态，但我仍然面临着这个问题。我有每个文本框的开始日期和结束日期，我用PHP计算了开始日期和结束日期的日期范围，并禁用了用户在开始日期和日期中选择的所有日期，所有这些日期都正常工作，但它返回了datepicker中禁用的最后一个文本框日期。

这是截图-

示例图像

用于datepicker的Javascript函数，用于取消每个框的日期-

$(function () {
  var count = $('#count').val();
  var uid = $('#usersId').val();
  var pid = $('#projectsId').val();
  for (i = 1; i <= count; i++) {
    $('#projectAssStartDate' + i).datepicker({
      beforeShowDay: function (date) {
        var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
        minDate: 0;
        alert(dateRange);
        console.log(dateString);
        return [dateRange.indexOf(dateString) == -1];
      }
    });

    var date_range = $('#calendarDateString' + i).val();

    var newdate = date_range.replace(/,(?=[^,]*$)/, '');
    var res = '"' + newdate + '"';
    var startDate, endDate, dateRange = res;

    $('#projectAssEndDate' + i).datepicker({
      beforeShowDay: function (date) {
        var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
        console.log(dateString);
        return [dateRange.indexOf(dateString) == -1];
      }
    });
  }
});

HTML用于创建框id的动态并从中获取值。

<input type="text" class='datepicker' size='11' title='D-MMM-YYYY' name="projectAssStartDate[]" id="projectAssStartDate<?php echo $id;?>"  value="" style="padding: 7px 8px 7px 8px;font-weight: bold;" />

<input type="text" class='datepicker' size='11' title='D-MMM-YYYY' name="projectAssEndDate[]" id="projectAssEndDate<?php echo $id;?>" value="" style="padding: 7px 8px 7px 8px;font-weight: bold;" />

<input id="calendarDateString<?php echo $id;?>" name="calendarDateString<?php echo $id;?>" title='D-MMM-YYYY' type="text" value="<?php echo $string;?>" />

<input id="projectsId" name="projectsId[]"  type="hidden" value="<?php echo $rows['PROJECT_ID'];?>" />

<input id="usersId" name="usersId[]"  type="hidden" value="<?php echo $rows['UM_ID'];?>" />

Answer 1

请检查答案并回答这是否是您需要的方式。如果没有，请说明您希望对下面的代码结果进行什么更改。我很抱歉，我操纵了你的一些价值观来缓解我的结果。如果这是您所期望的，将给出详细解释。

$(function () {
  var count = 2;//$('#count').val();
  var uid = $('#usersId').val();
  var pid = $('#projectsId').val();

// populate the array


var startDatearray= ["index 0","2016-06-15","2016-06-20"]; // you dont need to create this array .. just fetch these dates from your database as u need
var endDatearray=["index 0","2016-06-21","2016-06-25"];
var i;
  for (i = 1; i <= count; i++) {

    $('#projectAssStartDate' + i).datepicker({
      beforeShowDay: function (date) {
        var  i=parseInt($(this).attr('id').replace(/[^0-9\.]/g, ''), 10); // as i wont get here so i took it from the current id
        var startDate = startDatearray[i], // some start date
        endDate  = endDatearray[i];  // some end date
        var dateRange = [];
        for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
                dateRange.push($.datepicker.formatDate('yy-mm-dd', d));

        }
        var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
        minDate: 0;
        //alert(date);
        console.log(dateString +"__"+[dateRange.indexOf(dateString) == -1] +"__"+dateRange);
        return [dateRange.indexOf(dateString) != -1]; // if u need the opposit then you can use { == -1} 
      }
    });

    var date_range = $('#calendarDateString' + i).val();

    var newdate = date_range.replace(/,(?=[^,]*$)/, '');
    var res = '"' + newdate + '"';
    var startDate, endDate, dateRange = res;

    $('#projectAssEndDate' + i).datepicker({
      beforeShowDay: function (date) {
        var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
        console.log(dateString);
        var  i=parseInt($(this).attr('id').replace(/[^0-9\.]/g, ''), 10); // as i wont get here so i took it from the current id
        var startDate = startDatearray[i], // some start date
        endDate  = endDatearray[i];  // some end date
        var dateRange = [];
        for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
                dateRange.push($.datepicker.formatDate('yy-mm-dd', d));

        }
        var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
        minDate: 0;
        //alert(date);
        console.log(dateString +"__"+[dateRange.indexOf(dateString) == -1] +"__"+dateRange);
        return [dateRange.indexOf(dateString) != -1]; // if u need the opposit then you can use { == -1}
      }
    });
  }
});