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.
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.
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 Email
|
|||
|
|
4 comments :
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
Same issue for me to Suresh. image not displaying next right to text box
Hi Suresh,
How to implement if the webpage inherits design from a master page?
Hi Suresh,
How to open the calender on click of textbox.
Thanks in advance.