Bootstrap daterangepicker chose start date + 30 days as maxDate

Question

I was wondering if anyone could help me. Using Dat Grossman Bootstrap Date Picker I want to add 30 days to the selected start date and define that as maxDate so that the user cannot select minus this date.

I am really stuck with this and I cannot find any documentation regarding what I want to do. Here is my code;

var min_date = new Date(); var max_date = '05/31/2013'; $('#limited').daterangepicker( { minDate: min_date, maxDate: max_date, }, function(start, end) { $('#limited') .data("showAddEventDialogue_dateRangeStart", start) .data("showAddEventDialogue_dateRangeEnd", end); }); 

Any help or advice would be greatly appreciated.

Thanks a million.

Answer 1

It seems that the plugin only accepts a specific date format for minDate and maxDate , which is mm/dd/yyyy .

Just using new Date(); Unfortunately, it does not work, because it returns a full date, which is incorrect in the format.

It seems to me that the code below works, it will always use it as min and +30 as max.

 /* Get the code into mm/dd/yyyy format */ function getFormatDate(d){ return d.getMonth()+1 + '/' + d.getDate() + '/' + d.getFullYear() } $(document).ready(function() { var minDate = getFormatDate(new Date()), mdTemp = new Date(), maxDate = getFormatDate(new Date(mdTemp.setDate(mdTemp.getDate() + 30))); $('#daterange').daterangepicker( { minDate: minDate, maxDate: maxDate } ); }); 

Answer 2

As thebrieflabb noted in his comment, you can solve this problem as follows:

 var endDate = new Date(); endDate.setDate(startDate .getDate()+30); 

You can find more of your solution in this thread .

Hope this helps.

Answer 3

You can use the following:

 var date2 = new Date(); date2.setDate(date2.getDate()-1); console.log(date2); $('#daterange').daterangepicker({ showDropdowns: false, format:'MM/DD/YYYY', maxDate:date2, autoclose: true, autoApply:true, }); 

Hope this helps anyone.