Wednesday 16 April 2014

How to disable Future days in DatePicker on ASP.NET using JQuery



In this scenario we need to disable Future days of the current day. Below is the sample code of JQuery in ASP.NET.

Sample code:

<script type="text/javascript">
$(function() {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$('#datepicker').datepicker({
maxDate: new Date(currentYear, currentMonth, currentDate)
});
});
</script>

Example: 




Below is the total page design:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="" />
<title>jQuery Datepicker: Disable Future Dates</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$('#datepicker').datepicker({
maxDate: new Date(currentYear, currentMonth, currentDate)
});
});
</script>
</head>
<body>
<form runat="server" id="DesableFuture">
Date:
<asp:TextBox runat="server" ID="datepicker" />
</form>
</body>
</html>

Output:




No comments:

Post a Comment