Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

jquery date picker (today button)

Posted on 2014-09-09
8
Medium Priority
?
2,023 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 83

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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 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…
Suggested Courses

577 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