posted 12/14/2010 by Raghav Khunger
In this blog I will show you how to open or display jQuery datepicker on image's click instead of focus on the textbox. To accomplish it I have used the showOn property of the jQuery datepicker and set it to 'button' to make that happen. The src of the image is set via buttonImage property.Below is the sample code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#<%= txtDate.ClientID %>').datepicker({ buttonImage: '../../images/icons/calendar.png', buttonImageOnly: true, showOn: 'button' }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> </form> </body> </html>
Do let me know your feedback, comments.
Thanks... Thanks a lot..
This script Helps me a lot.
What kind of email newsletter would you prefer to receive from CodeAsp.Net?18
