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

jquery date picker (today button)

Posted on 2014-09-09
8
1,373 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
  • 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

860 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