Hi Readers,
Welcome to FindNerd, today we are going to discuss a method to disable previous dates in datepicker using jQuery?
Datepickers is a very important feature of a web application. It is mostly used in any registration form when any user goes to sign up.Datepickers() method allow to users for filling dates easily and visually in <input> elements. You can customize the date format and language In jQueryUI.
You can also change the appearance of HTML elements on a page with new CSS and also make it selectable date range.
Note:datepicker() method is mostly uses with <input> elements.
In below example you can see that when the user focuses on input field by clicking on it or using the tab key, below jQuery code pop-ups calendar for choosing a date,Then you will see previous dates is disable.
<!DOCTYPE html>
<html>
<head>
<title>Datepicker</title>
<!--add here jquery Date UI with CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/></script>
<link rel="stylesheet" ref="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<!--end-->
<!--here define css-->
<style type="text/css">
#width {
max-width: 600px;
margin: 0 auto;
color:red;
}
table{
background-color: grey;
color: white;
width: 232px;
}
.ui-datepicker-next.ui-corner-all{float: right;}
.ui-datepicker-title{ background: none repeat scroll 0 0 skyblue;
text-align: center;}
</style>
<!-- end css paret -->
</head>
<body>
<script>
jQuery(document).ready(function() {
$('#datepick').datepicker({
format: "dd/mm/yyyy",
clearBtn: true,
minDate: 0,
maxDate: "+1M +30D",//define limitation of day
WeekDisabled: "0,6"
});
});
</script>
<!--start HTML Form -->
<div id="width">
<h2>Select Date</h2>
Date:<input id="datepick" type="text" placeholder="Enter Date">
</div>
<!--end HTML code -->
</body>
</html>
In above code, you can see uses of maxDate which is provided to the user for filling next 1month and 30day and by using WeekDisabled it's keeping disabled which days have passed.
0 Comment(s)