Question

您好我有一个日期护林员选择器我想显示为特定日期范围定义的所有日期范围，如下所示：

假设我的日期范围是：01/01 / 2017-01 / 07/2017 并且我有一个数组所有日期，它们在db中的上述日期范围之间定义。数组如下：

$ sub_dates = [＆＃39; 01/01 / 2017＆＃39;，＆＃39; 02/01 / 2017＆＃39;，.......直到01/07/2017];

因此，如果我点击日期范围选择器上的日期范围，我需要在其上显示所有这些定义的日期（$ sub_dates）。

var sub_dates = ['01/01/2017','02/01/2017',.......till 01/07/2017];
  $('.lot-calander1').daterangepicker({
    beforeShowDay: function(date){
    var string = $.daterangepicker.formatDate('yy-mm-dd', date);
    return [ sub_dates.indexOf(string) == -1 ]
 }  
});

但它没有在日期范围选择器上显示这些日期。请帮助解决可能存在的问题

感谢提前

Answer 1

此解决方案使用'invalidDate'来检查日期数组并禁用它们。为了简单起见和比较，我们为日期字符串创建一个新数组，并使它们成为integers。您可以根据需要替换此方法。

$(function() {
  var sub_dates = ['01/01/2017','01/03/2017','01/25/2017', '02/01/2017'];
  var sub_dates_date = sub_dates.map(function(b) {
    return +(new Date(b));
  });

  $('input[name="daterange"]').daterangepicker({
    isInvalidDate: function(a) {
      return sub_dates_date.indexOf(+(new Date(a))) < 0;
    }
  });
});

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input type="text" name="daterange" value="01/01/2017 - 01/31/2017" />

告诉我们。

Answer 2

您可以使用minDate和maxDate选项

$(function() {
  $('input[name="daterange"]').daterangepicker({
      locale: {
         format: 'MM/DD/YYYY'
      },
      minDate: '01/01/2017',
      maxDate: '01/07/2017'
  });
});

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input type="text" name="daterange" value="01/01/2017 - 01/07/2017" />

如何在日期范围Jquery之间显示多个日期范围

2 个答案: