Saturday, November 14, 2009

jQuery DatePicker with icon

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.


4 comments:

  1. You probably already figured it out but just in case, to show the menu on both the button and text box, do this:

    $(document).ready(function(){
    $("#datepicker").datepicker({showOn: 'both', buttonImage: '/images/search.gif', buttonImageOnly: true});
    });

    ReplyDelete
  2. Awesome! This is exactly what I needed as well. Thank you.

    ReplyDelete
  3. This is very nice tutorial, i also recently wrote tutorial about jQuery Datepicker, hope you like it.
    https://htmlcssphptutorial.wordpress.com/2015/09/09/jquery-datepicker-with-icon/

    ReplyDelete