[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

display Jquery UI Datepicker inline but have no date selected on open

Posted on 2010-09-23
10
Medium Priority
?
1,081 Views
Last Modified: 2012-06-27
Hello experts
Here's the rub: I have a webpage with a Jquery UI Datepicker displaying inline which on opening the page populates an input box and I want to stop that behaviour, ie it only populates when the user has clicked a date. I can get this to work if I use the datepicker as a pop open when the input gets focus but not when displayed inline. My problem stems from the fact that I don't want the user to be able to select weekends or holidays, nor today or tomorrow - as it is now if I open the page it populates with Saturdays' date (a no no).
I hope I've explained the problem succintly and that somebody can point me in the right direction... Thanks in advance
Datepicker page here
Jquery functions here
0
Comment
Question by:Mick_Eden
10 Comments
 

Author Comment

by:Mick_Eden
ID: 33744379
Hi, thanks for answering but it doesn't really help me- I've already disabled the weekends and holidays etc for the datepicker (I think the function I used is based on the one you posted a link to) but that doesn't stop the input box displying the default date on open, even if that date is disabled (as is the case if you look at it now)
0
 
LVL 15

Expert Comment

by:dirknibleck
ID: 33744601
I would recommend trying one of the following:

$(function() { 
    $("#date").datepicker({
		minDate: +2,
		altField: '#datePicker',
		showOtherMonths: true, 
		selectOtherMonths: true,
		dateFormat: 'D dd M y',
      	beforeShowDay: noWeekendsOrHolidays
     });
  }).datepicker("setDate", null);

OR

$(function() { 
    $("#date").datepicker({
		minDate: +2,
		altField: '#datePicker',
		showOtherMonths: true, 
		selectOtherMonths: true,
		dateFormat: 'D dd M y',
      	        beforeShowDay: noWeekendsOrHolidays,
                beforeShow: function(){$("#datePicker").val(null);}
     });
  });

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Mick_Eden
ID: 33744957
Thanks, musty nipped out for 2 pints of lunch so I will check it when I get back home
0
 

Author Comment

by:Mick_Eden
ID: 33744971
Musty==just :)
0
 

Author Comment

by:Mick_Eden
ID: 33746396
Thanks Dirknibleck but it still doesn't work - I've tried it with both functions (jquery.ui.js on my remote server has been updated with the second function you  supplied and the field is still pre populatedwhen you land on the page(as happened with the first))
0
 
LVL 22

Accepted Solution

by:
kadaba earned 2000 total points
ID: 33746734
How about this?

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  var d = new Date();
  var natDays   = [[12,27,2010],[12,28,2010],[1,3,2011],[4,22,2011],[4,25,2011],[5,2,2011],[5,30,2011],[8,29,2011],[12,26,2011],[12,27,2011],[1,2,2012],[4,6,2012],[4,9,2012],[5,7,2012],[6,4,2012],[6,5,2012],[8,27,2012],[12,25,2012],[12,26,2012]];

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (i = 0; i < natDays.length; i++) {
      if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
      {
        return [false];
      }
    }
    return [true];
  }
  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
 
$(document).ready(function() {
	$("#date").datepicker({
		minDate: +2,
		altField: '#datePicker',
		showOtherMonths: true, 
		selectOtherMonths: true,
		dateFormat: 'D dd M y',
		beforeShowDay: noWeekendsOrHolidays});
		
	checkDateValidity();
	
	$("#datePicker").change(function(){
		checkDateValidity();
	});	
		
});

function checkDateValidity(){
	if(noWeekendsOrHolidays(d)){
		$("#datePicker").val("");
	}
}
	 
  </script>
</head>
<body style="font-size:62.5%;">
  
<div type="text" id="date"></div>
<div id="appDateSelected"><fieldset><legend>You Selected</legend>
<label for="datePicker">Appointment Date </label><input name="datePicker" type="text" id="datePicker" class="date" />     </fieldset>
</div>
</body>
</html>

Open in new window

0
 
LVL 27

Expert Comment

by:lenamtl
ID: 33746849
Hi could you show us the function code.

Did you tried to set gotoCurrent:false
0
 

Author Comment

by:Mick_Eden
ID: 33746923
Thanks Kadaba - that worked a treat! It also convinced me to carry on with Experts Exchange after my trial (not guilty yer onour) is over.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33747021
Thank you Mick.

I am glad I could be of some help :) I hope you get the most out of EE.

Have a good day.

Best,
kadaba
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month19 days, 22 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question