This article will show you how you can open the jQuery date
time picker calendar on click on image button using jQuery in asp.net.
Some of my previous articles are as follows:
Disable
jQuery UI DatePicker Calendar On Button Click In Asp.Net, C#
Conversion of DateTime to 24 Hours Time in Asp.Net | Display 24 Hour Time In
DropDownList In Asp.net, jQuery
DatePicker Calendar With Dropdown Month and Year in Asp.Net, jQuery
DateTime Picker Calender In ASP.NET MVC | How To Access jQuery DateTime Picker
Calender Value in MVC Controller, jQuery
Datepicker Calendar With Multiple Months in Asp.net Disable
jQuery UI DatePicker Calendar On Button Click In Asp.Net.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DateTimePicker.aspx.cs"
Inherits="ProjectDemo_Asp.et.DateTimePicker" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>jQuery
Datepicker Calendar With Open On Image Button Click in Asp.net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
body
{
font-size:
70%;
}
</style>
<script type="text/javascript" language="javascript">
$(function
() {
$("#<%=TextBox1.ClientID
%>").datepicker({
showOn: "button",
buttonImage: "images/calendar-icon.png",
buttonImageOnly: true,
buttonText: "Select date"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
Date Of Birth:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
</div>
</form>
</body>
</html>
|
In above code for displaying the calendar on image button
click. Please check the buttonImage: "images/calendar-icon.png"
, this line will help you on
displaying the calendar control on click on image button.
Now we have done run the page and check output.
DOWNLOAD
About the Author
This is very nice tutorial, i also recently wrote tutorial about jQuery Datepicker, hope you like it.
ReplyDeletehttps://htmlcssphptutorial.wordpress.com/2015/09/09/jquery-datepicker-with-icon/