jquery date picker (today button)

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
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
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
RobOwner (Aidellio)Commented:
(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
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
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
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

leakim971PluritechnicianCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
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
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
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
RobOwner (Aidellio)Commented:
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
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Cheers Rob,
I'll give it a crack!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.