This article will show you how you can use a jQuery UI date
time picker calendar and after selecting
the date disable the calendar control on button click on asp.net application.
Some of my previous articles are as follows:
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.
So for this article first we will create a new asp.net
application and add the below code into the page.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DateTimePicker.aspx.cs"
Inherits="WebApplication7.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 runat="server">
<title>Disable
jQuery UI DatePicker Calendar On Button Click In Asp.Net</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"
rel="stylesheet"
/>
<style>
div.ui-datepicker
{
font-size:
11px;
}
</style>
<script type="text/javascript">
$(function
() {
$('#<%=txtdob.ClientID%>').datepicker();
})
function
DisableCalander() {
$('#<%=txtdob.ClientID%>').datepicker('disable');
return
false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Select Date:
<asp:TextBox ID="txtdob" runat="server" />
<asp:Button ID="btndisable" runat="server" Text="Disable" OnClientClick="javascript:return DisableCalander();" />
</div>
</form>
</body>
</html>
|
In above code just check the below mention jQuery code.
|
<script type="text/javascript">
$(function
() {
$('#<%=txtdob.ClientID%>').datepicker();
})
function
DisableCalander() {
$('#<%=txtdob.ClientID%>').datepicker('disable');
return
false;
}
</script>
|
In above code I have first assigned the date picker and in
second I am disabling the date picker control. Now we have done run the page
and check the output.
About the Author
0 comments:
Please let me know your view