Solved

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

Posted on 2010-09-23
10
1,069 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

691 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