How to display multiple date ranges between a date-range Jquery

Question

Hi I have a date ranger picker on this I want to display all the date ranges which is defined for a particular date-range as this:

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

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

So if I click on date range on date-range picker I need to show all these defined 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 is not displaying these date on date-range picker. please assist what could be the issue

Thanks 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" />

Please Note: You can change the color as you want.

Hope It will help you.