Solved

jquery date picker (today button)

Posted on 2014-09-09
8
1,431 Views
Last Modified: 2014-09-09
He all,
test page http://www.soundsair.com/test.html
If you click on the outbound field a calendar pops up. I would like to tweak the "today" button so that not only does it highlight todays date on the calendar but also auto populate the outbound form field.
Can anyone assist?
Cheers,
N
0
Comment
Question by:Neil_Bradley
[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
  • 3
  • 3
  • 2
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40313577
Add this in the header section just after creating your datepicker :
$("body").delegate("button[data-handler=today]", "click", function() { 
              $("#Date").datepicker("setDate", new Date()).datepicker( "hide" );
              $("#RDate").focus(); // set focus to the next datepicker
});

Open in new window

0
 
LVL 43

Expert Comment

by:Rob
ID: 40313583
(no points) but to add what leakim971 has said, the reason you need the delegate function is because the html of the datepicker is not present until you click in the textbox.
0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 40313590
That's beautiful.. can I push the question a tad more and ask about how to replication this on the return calendar "today button"?
N
Working here: http://www.soundsair.com/test.html
0
Independent Software Vendors: 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!

 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40313610
remove the previous and your datepicker code and use the following :
$( "#Date" ).datepicker({
	showOn: "both",      
	buttonImage: "/orange-widget/img/miniCal.gif",      
	buttonImageOnly: true,    
	changeMonth: true,      
	changeYear: true,
	showButtonPanel: true,
	dateFormat: 'dd/mm/yy',
	minDate: 0, maxDate: "+1Y",
	onClose: function( selectedDate ) {
		$("body").undelegate("button[data-handler=today]", "click");
		$( "#RDate" ).datepicker( "option", "minDate", selectedDate );
	},
	beforeShow: function(el,ui) {
		$("body").delegate("button[data-handler=today]", "click", function() { 
			$("#Date").datepicker("setDate", new Date()).datepicker( "hide" );
			$("#RDate").focus(); // set focus to the next datepicker
		});
	}
});

$( "#RDate" ).datepicker({
	showOn: "both",      
	buttonImage: "/orange-widget/img/miniCal.gif",      
	buttonImageOnly: true,    
	changeMonth: true,      
	changeYear: true,
	showButtonPanel: true,
	dateFormat: 'dd/mm/yy',
	minDate: 0, maxDate: "+1Y",
	onClose: function( selectedDate ) {
		$("body").undelegate("button[data-handler=today]", "click");
		$( "#Date" ).datepicker( "option", "maxDate", selectedDate );
	},
	beforeShow: function(el,ui) {
		$("body").delegate("button[data-handler=today]", "click", function() { 
			$("#RDate").datepicker("setDate", new Date()).datepicker( "hide" );
			$("#Adults").focus(); // set focus to Adults dropdown
		});
	}
});

Open in new window

0
 
LVL 43

Expert Comment

by:Rob
ID: 40313625
Much easier than that with the use of a global variable.  Feel free to use a namespace as well.  Keeps track of the currently active datepicker field.

var dpActive;
$(".hasDatepicker").focus(function() {dpActive = this});
$("body").delegate("button[data-handler=today]", "click", function() {
    $(dpActive).datepicker("setDate", new Date()).datepicker( "hide" );
});

Open in new window

0
 
LVL 5

Author Closing Comment

by:Neil_Bradley
ID: 40313685
Outstanding work. I had to geve you all of the points as your answer was the first and most complete.
Working example here http://www.soundsair.com/test.html
The only niggle I found was when the page is viewed on IE. The calendar on the return flight field hides then shows again when the today button is selected.
Apart from that. Beautiful.
Cheers,
Neil
0
 
LVL 43

Expert Comment

by:Rob
ID: 40313687
I'm glad you gave them all to leakim971 as I indicated I didn't want any, as I was building on what leakim had posted.

However did you see in my last comment the simplified version? http:#a40313625
0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 40313729
Cheers Rob,
I'll give it a crack!
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

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…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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)
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…

726 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