It is always quite convenient to use an icon to pop-up the date picker in onclick of an icon. It is a very easy task with jQuery date picker. Try following code:
<html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#datepicker").datepicker({showOn: 'button', buttonImage: '/images/search.gif', buttonImageOnly: true}); }); </script> </head> <body> <div class="demo"> <p>Date: <input type="text" id="datepicker"></p> </div> </body> </html>
But when you use the above code, the DatePicker will not be popped-up when clicked in the text box, but on the icon. Please be kind enough to make a comment if you happend to find the solution for that.
You probably already figured it out but just in case, to show the menu on both the button and text box, do this:
ReplyDelete$(document).ready(function(){
$("#datepicker").datepicker({showOn: 'both', buttonImage: '/images/search.gif', buttonImageOnly: true});
});
Hi David,
ReplyDeleteThnx for sharing
Awesome! This is exactly what I needed as well. Thank you.
ReplyDeleteThis is very nice tutorial, i also recently wrote tutorial about jQuery Datepicker, hope you like it.
ReplyDeletehttps://htmlcssphptutorial.wordpress.com/2015/09/09/jquery-datepicker-with-icon/