Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Show Jquery datepicker when click on image in asp.net

Apr 28, 2012
Introduction

In this article I will explain how to show JQuery calendar control when click on image instead of focus on textbox in asp.net.
Description:
  
In previous post I explained many articles relating to
JQuery Datepicker in asp.net. Now I will explain how to show JQuery calendar control instead of focus on textbox using asp.net.
Till now I explained JQuery Datepicker articles relating to show the datepicker whenever we place or focus courser in textbox.

In one situation I got requirement like show JQuery Datepicker control whenever we click on image beside of textbox and show the date in textbox which is selected from datepicker.
To implement this one first open Visual Studio and create new website after that write following code in your aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show Jquery DatePicker whenever we click on image beside of textbox</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker({
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true
});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
If you observe above code in header section I added some of script files and css classes by using those files we will display calendar control with beautiful css style. You can get those files by downloading attached sample.

If you observe script in header section

$(function() {
$("#txtDate").datepicker({
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true
});
});
In this script I am setting properties like show calendar based on button click and button image.

After completion of aspx page design and your code modifications just run your application and check your calendar control that would be like below demo

Demo


Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

8 comments :

Unknown said...

Hi suresh,
I am using jquery calender inside gridview,its working fine but the calender image displaying below textbox,i need to display that image on right side of textbox...please help me

Anonymous said...

Same issue for me to Suresh. image not displaying next right to text box

Anonymous said...

Hi Suresh,
How to implement if the webpage inherits design from a master page?

Anonymous said...

Hi Suresh,
How to open the calender on click of textbox.



Thanks in advance.

Anonymous said...

Hi sir,
how to use this in content page.

Anonymous said...

Hi Suresh,

I'm not getting the calendar image. Just I'm getting "...". If I click this calendar will open. So plz let me know what's the issue is. I need to get the calendar when i click the image.

T Thank you

Pramod said...

Please suresh, tell me how to focus an portion of an image and display in a picturebox in asp.net

Anonymous said...

I cant see image of Calander.so solve my question plz....

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.