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
Solved

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

Posted on 2010-09-23
10
1,062 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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33744271
0
 

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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 500 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 25

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

829 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