How to display multiple date ranges between jquery date

Question

Hi, I have a date ranger selector. I want to display all date ranges defined for a specific date range, like this:

Suppose my date range is 01/01 / 2017-01 / 07/2017 and I have an array of all dates that are defined between the above date range in db.So the array looks like:

$ sub_dates = ['01 / 01/2017 ',' 02/01/2017 ', ... until 01/07/2017];

So, if I click on a date range in a date picker, I need to show all these specific dates ($ sub_dates) on it.

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 ]
 }  
}); 

But it does not display this date in the date range selection set. please help what could be the problem

thanks in advance

Answer 1

$(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;
    }
  });
});

.daterangepicker td.available {
	color: red;
	background-color: blue;
}

.daterangepicker td.available.start-date, .daterangepicker td.available.end-date {
	color: green;
	background-color: black;
}

<!-- 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

"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 3

You can use the options minDateandmaxDate

$(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" />

Run code