Solved

jquery date picker (today button)

Posted on 2014-09-09
8
1,147 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 42

Expert Comment

by:Rob Jurd, EE MVE
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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
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 42

Expert Comment

by:Rob Jurd, EE MVE
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now