We help IT Professionals succeed at work.

Bootstrap date picker V2 date restriction

Neil_Bradley
Neil_Bradley asked
on
689 Views
Last Modified: 2017-03-09
	 $('input.tour-pick').datepicker({
                todayHighlight: true, 
                endDate: '+365d', 
                format: 'mm/dd/yyyy',
                autoclose: true,
                startDate: new Date()
            });

Open in new window


I'd like to only be able to select dates between July 20 and Aug 31 each year. Is this possible on Bootstrap Datepicker V2 and if so how would I do it?
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2004
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Neil_BradleyWeb UX/UI Developer

Author

Commented:
I beg your pardon?
Who should stop what?
CERTIFIED EXPERT
Top Expert 2004

Commented:
When I posted the link, the site would not let me submit it until I posted an "explanation" for the link.  So, I wrote that text to fulfill the technical requirements while voicing my opinion of the new policy.

In any case, the maxDate and minDate options are what you want.
CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
After hours and hours.....searching and testing I find a solution. As you know the datepicker bootstrap have an option named datesDisabled that takes an array value with all these dates that you don't want to use. So as you can see in my code first I create an array with all these dates that you want to select (year=2017). Second via two for loops I create a second array with all the dates of the present year (2017).
So far so good...
At the end I use filter method  referencing at ES06 to remove the dates of the second array (all year dates) all the dates that we have in the first (dates that we want to select). Finally the filtering array passed as values to datesDisabled option in the datepicker (initialization as I understand)
HTML code:
<input id="datepicker"  data-date-format="mm/dd/yyyy"/>

Open in new window


JQuery code:

var year=new Date();
year=year.getFullYear().toString();
var activeDates=['20/07/'+year,'21/07/'+year,'22/07/'+year, '23/07/'+year, '24/07/'+year, '25/07/'+year, '26/07/'+year, 
                 '27/07/'+year,'28/07/'+year, '29/07/'+year, '30/07/'+year, '01/08/'+year, '02/08/'+year, '03/08/'+year, 
                 '04/08/'+year, '05/08/'+year, '06/08/'+year, '07/08/'+year, '08/08/'+year,  '09/08/'+year, '10/08/'+year, 
                 '11/08/'+year, '12/08/'+year, '13/08/'+year, '14/08/'+year, '15/08/'+year, '16/08/'+year, '17/08/'+year, 
                 '18/08/'+year, '19/08/'+year, '20/08/'+year, '21/08/'+year, '22/08/'+year, '23/08/'+year, '24/08/'+year, 
                 '25/08/'+year, '26/08/'+year, '27/08/'+year, '28/08/'+year, '29/08/'+year, '30/08/'+year, '31/08/'+year                
                ];

var dateDis=[];

for(var i=01;i<=12;i++){
  if(i<10){
        i='0'+i;  
  } 
    for(var z=01;z<=31;z++){
      if(z<10){
        z='0'+z;  
  }
     
      var date=z.toString()+'/'+i.toString()+'/'+year;
      dateDis.push(date);
      
    } 
}

dateDis = dateDis.filter(val => !activeDates.includes(val));

          $( "#datepicker" ).datepicker({
                calendarWeeks:false,
                clearBtn:true,
                format: 'dd/mm/yyyy',
                datesDisabled:dateDis,  
                autoclose: true,
                startDate: new Date(),
                todayHighlight: true, 
                endDate: '+365d'               
                
                 
        });
    

Open in new window

CERTIFIED EXPERT
Top Expert 2004

Commented:
@Leonidas: While I appreciate the obvious effort you expended to create a working solution, I can't help but wonder:

a) Did you try to work with minDate/maxDate at all?
b) What happens if the inclusive date range is larger (say, 2 years worth), or if it is not a static range?
Neil_BradleyWeb UX/UI Developer

Author

Commented:
As always the simplest solution worked the best.
This did the trick perfectly thank you.
Neil
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.