首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何为多个输入加载具有不同日期范围的日期时间选择器

如何为多个输入加载具有不同日期范围的日期时间选择器
EN

Stack Overflow用户
提问于 2016-06-17 14:25:41
回答 1查看 270关注 0票数 1

我希望在每个框中都有新的日期范围,但它只返回上次文本框中的日期范围。我也使文本框id是动态的,但我仍然面临着这个问题。我有每个文本框的开始日期和结束日期,我在PHP中计算了开始日期和结束日期的日期范围,并禁用了所有这些日期,这是由用户选择的开始日期和日期,所有工作都很好,但它返回最后的文本框日期禁用日期拾取器。

这是屏幕截图-

Sample Image

datepicker的Javascript函数为每个盒子拆分日期-

代码语言: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];
      }
    });
  }
});

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

代码语言:javascript
复制
<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'];?>" />
EN

回答 1

Stack Overflow用户

发布于 2016-06-17 19:01:06

请检查答案,并回答这是否是您需要的方式。如果不是,请在下面的代码结果中注明您想要的更改。我很抱歉我操纵了你的一些价值观来减轻我的结果。如果这是你所期望的,我会给出详细的解释。

代码语言:javascript
复制
$(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}
      }
    });
  }
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37874552

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档