jqeuery ui datepicker before show

I have the jquery ui datepicker and what I need to do is change the background color of the dates that are 45 days in from todays date.

function highlightOdds(date) {
      /*return [true, date.getDate() % 2 == 1 ? 'odd' : ''];*/
      
      var then = date.getTime();
      now  = new Date().getTime();
      thirtyDaysInMilliseconds = 3888000000;
      if (now - then > thirtyDaysInMilliseconds) { 
      	return [true,  'odd'];
       }else{
       	
       }
      
      
 }


$("#desiredStartDate").datepicker({
			beforeShowDay: function(date) {
			    if($.inArray($.datepicker.formatDate('dd-mm-yy', date ), array) > -1)
			    {
			        return [false,"","Booked out"];
			    }
			    else
			    {
			        return [true,'',"available"];
			    }
			    
			    
			},
			beforeShowDay: highlightOdds,
			changeMonth: true,
			timepicker:false,
			changeYear: true,
			controlType: 'select',

			
			minDate: "+3D",
			maxDate:"+90D"
			


		});

Open in new window

LVL 19
erikTsomikSystem Architect, CF programmer Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

erikTsomikSystem Architect, CF programmer Author Commented:
are there any suggestions
0
Robert SchuttSoftware EngineerCommented:
You shouldn't specify the beforeShowDay property twice (only the second one is actually called).

Maybe it's not a problem for you but I noticed a difference in time zone in the function argument 'date' and the 'now' variable so I applied a fix to compare them as 'whole days' so to speak.

This is the code:
function highlightOdds(date) {
      
      var then = date.getTime(),
          now  = new Date(),
          thirtyDaysInMilliseconds = 3888000000, // 45 days!
		  threeDaysInMilliseconds  =  259200000; // 3 * 24 * 3600 * 1000
      // go back to midnight for comparison
	  now.setHours(0);
      now.setMinutes(0);
      now.setSeconds(0);
      now.setMilliseconds(0);
	  // note that a difference in timezone can shift the day comparison
	  now = now.getTime() + 60 * (date.getTimezoneOffset() - now.getTimezoneOffset());
	  if (then - now >= threeDaysInMilliseconds && then - now <= thirtyDaysInMilliseconds) { 
      	return [true, 'available', 'This day is available!'];
      }else{
       	return [false, ''];
      }
      
      
 }


$("#desiredStartDate").datepicker({
			beforeShowDay: highlightOdds,
			changeMonth: true,
			timepicker:false,
			changeYear: true,
			controlType: 'select',
			
			minDate: "+3D",
			maxDate:"+90D"
		});

Open in new window

Live example here: http://schutt.nl/ee/Q_28647499/
0
erikTsomikSystem Architect, CF programmer Author Commented:
I think you mixed in two separate things. The first is two blackout specific dates  and the second is to color the dates 45 days in.

I tried to combine both but does not seems to work,

var array  = [<cfoutput>#locBlockOutDates#</cfoutput>];
	
	function highlightOdds(date) {
      /*return [true, date.getDate() % 2 == 1 ? 'odd' : ''];*/
      
      var then = date.getTime();
     
      now  = new Date();
     
       thirtyDaysInMilliseconds = 3888000000; // 45 days!
       threeDaysInMilliseconds  =  259200000; // 3 * 24 * 3600 * 1000
       // go back to midnight for comparison
      now.setHours(0);
      now.setMinutes(0);
      now.setSeconds(0);
      now.setMilliseconds(0);
      // note that a difference in timezone can shift the day comparison
      now = now.getTime() + 60 * (date.getTimezoneOffset() - now.getTimezoneOffset());
      
      if (then - now >= threeDaysInMilliseconds && then - now <= thirtyDaysInMilliseconds) { 
        return [true, 'odd', 'This day is available!'];
      }else{
        return [true, 'not'];
      }
      
       if($.inArray($.datepicker.formatDate('dd-mm-yy', date ), array) > -1)
                {
                    return [false,"","Booked out"];
                }
                else
                {
                    return [true,'',"available"];
                }
 }

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Robert SchuttSoftware EngineerCommented:
Ah now I see, you do need the 'array' bit, I thought it was superfluous...

Try this (untested):
var array  = [<cfoutput>#locBlockOutDates#</cfoutput>];
	
	function highlightOdds(date) {
      /*return [true, date.getDate() % 2 == 1 ? 'odd' : ''];*/
      
      var then = date.getTime();
     
      var now  = new Date();
     
      var thirtyDaysInMilliseconds = 3888000000; // 45 days!
      var threeDaysInMilliseconds  =  259200000; // 3 * 24 * 3600 * 1000
      // go back to midnight for comparison
      now.setHours(0);
      now.setMinutes(0);
      now.setSeconds(0);
      now.setMilliseconds(0);
      // note that a difference in timezone can shift the day comparison
      now = now.getTime() + 60 * (date.getTimezoneOffset() - now.getTimezoneOffset());
      
      var classToReturn = '';
      if (then - now >= threeDaysInMilliseconds && then - now <= thirtyDaysInMilliseconds) { 
        //return [true, 'odd', 'This day is available!'];
	classToReturn = 'odd';
      }else{
        //return [true, 'not'];
	classToReturn = ''; // or 'not' if you need it specifically
      }
      
       if($.inArray($.datepicker.formatDate('dd-mm-yy', date ), array) > -1)
                {
                    return [false,classToReturn,"Booked out"];
                }
                else
                {
                    return [true,classToReturn,"available"];
                }
 }

Open in new window

0
Robert SchuttSoftware EngineerCommented:
0
erikTsomikSystem Architect, CF programmer Author Commented:
IN your example I see you have 5/4/2015 to be blocked out, but it does not
0
Robert SchuttSoftware EngineerCommented:
I think you mean May 4th but that's April 5th, the code contains the format:
$.datepicker.formatDate('dd-mm-yy', date )

Open in new window

0
erikTsomikSystem Architect, CF programmer Author Commented:
The lock out rules are applied for 45 days out till 90 days and the colors are applied for 45 days in
0
Robert SchuttSoftware EngineerCommented:
I'm afraid I don't know what you mean by that.
0
erikTsomikSystem Architect, CF programmer Author Commented:
What I meant is the following:

From today+3 days I need show dates in the different calors, After 45 days to 90 days I need to be able to block out some dates based on the dates stored in the array
0
Robert SchuttSoftware EngineerCommented:
Ok, that's clear, gimme a second I'll have another go. The trick is simply going to be combining the 2 different checks into 1 'return' statement.
0
Robert SchuttSoftware EngineerCommented:
I had another look but the code does what I had in mind:
- separately determine the class to be displayed for dates between 3 and 45 days from now, in my example they will have a yellow border;
- show dates as blocked/booked when they are in the array, in addition to the blocked dates that are set by the minDate/maxDate settings.

I changed the array but that's peanuts of course. I also added another check for 90 days but actually that doesn't change anything because that's already handled by the maxDate of +90D that you've set.

latest code is here: http://schutt.nl/ee/Q_28647499/index3.html

I think I need a more specific example if I did in fact understand you incorrectly.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Robert SchuttSoftware EngineerCommented:
One thing I just noticed is that the first 3 days are blocked out (by the minDate) but have a tooltip of "available", which would make no sense of course so there is probably at least one more check needed:
if(then - now < threeDaysInMilliseconds || then - now > ninetyDaysInMilliseconds || $.inArray($.datepicker.formatDate('dd-mm-yy', date ), array) > -1)

Open in new window


But even more probable is that another 'if' is necessary to remove the tooltip on days that fall outside the range, maybe something like:
      var ninetyDaysInMilliseconds =  90 * 24 * 3600 * 1000;
			if(then - now < threeDaysInMilliseconds || then - now > ninetyDaysInMilliseconds)
                {
                    return [false,classToReturn,""];
                }
                else if ($.inArray($.datepicker.formatDate('dd-mm-yy', date ), array) > -1)
                {
                    return [false,classToReturn,"Booked out"];
                }
                else
                {
                    return [true,classToReturn,"available"];
                }

Open in new window

and of course those 'yellow' days now have a tooltip of 'available' which is not entirely clear to me if that's what you want, it may have a different meaning?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.