Calendar Control with Disabled past date

Jacob
JQUERY - May 31, 2016

In this article, i will show you, how to show calendar control with disabled past date. I mean to say that if you select date then calendar control disabled all previous day. Also i will provide you, After select a specific date then you don't move to previous months. Lets see an example.

Before example i will teach you about calendar control. If you write following function then you can see full calendar control. If you want to disabled previous date after select specific date then see next example.

$(function () {
$("input[id*='calid']").datepicker();
})

Disabled Previous Date:

$(function () {
$("input[id*='calid']").datepicker({
minDate: new Date(2016,6,1)
});
})

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar Control with Disabled past date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>

$(function () {
$("input[id*='calid']").datepicker({

minDate: new Date(2016,6,1)
});
})

</script>

</head>
<body>
<form id="form1">
<input type="text" id="calid" />
</form>
</body>
</html>

Code Generate the Following code