?
Solved

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

Posted on 2010-09-23
10
Medium Priority
?
1,075 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 26

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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

650 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