This example demonstrates how to restrict date range in jQuery UI datepicker. By default jQuery UI datepicker provides datepicker without any restriction. You can set minDate and maxDate date range options in jQuery UI datepicker. You can set date, number and string values in minDate and maxDate options. To restrict the number of days in datepicker then you have to set integer number. To restrict year, month and for week then you have to set string value. For example
Year: ‘2y’
Month: ‘5m’
Week: ‘5w’
Days: ‘4d’
minDate: To set a minimum selectable date in the current date in jQuery UI datepicker.
maxDate: To set maximum selectable date in the current date jQuery UI datepicker.
Here’s an example
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"
type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"
type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/le-frog/jquery-ui.css"
type="text/css" media="all" />
<script type="text/javascript">
$(function () {
$("#<%= TextBox1.ClientID %>").datepicker({
minDate: -7,
maxDate: "2M"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
In the above code, I have set minimum range to -7 days it mean that before 7days from current date it will be disabled and I have set maximum range to 2 month it means, from current date to next two month from current date will be enable in jQuery UI date picker calendar.
Output
Download
Restrict-date-range-in-jQuery-UI-datepicker.aspx (987.00 bytes)
See live demo