This article will show you how you can restrict date range
in jQuery date time picker calendar in asp.net. In this user will not be able
to select the date beyond specified date range or min and max date range set.
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, jQuery
Datepicker Calendar Open On Image Button Click in Asp.net.
So for this article first we will create a new asp.net
application and add the below code in your asp.net page.
|
<%@ 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 Restrict Date Range 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({
minDate: -15, maxDate: "+1M +2D"
});
});
</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 please check the below mention jQuery code
line.
|
$("#<%=TextBox1.ClientID %>").datepicker({ minDate: -15,
maxDate: "+1M +2D" });
|
In above code I have specified min date and max date with in
which calendar date will be select. In above coed calendar will open only for past 15 days with current date and next 1 month and 2 days from current date. Now we have done run the page and check
output.
About the Author
0 comments:
Please let me know your view