Sunday, May 7, 2017

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

By Hường Hana 7:00 PM , Leave a Comment

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

3 Answers

Answers 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.

Answers 2

This solution uses 'invalidDate' to check against the array of dates and disable them. For simplicity and also comparison purpose we create a new array for the string of dates and make them integers. You can replace this method as necessary.

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

Let us know.

Answers 3

You can use minDate and maxDate options

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

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment