Solved

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

Posted on 2010-09-23
10
1,066 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
 
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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

Suggested Solutions

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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)

749 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