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.