Showing posts with label datepicker. Show all posts
Showing posts with label datepicker. Show all posts

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.