disable future date validation in jquery
PHP

How to disable future dates in datepicker?

Ankit

welcome back to shortlearner.com, in this post we will see how to use jQuery date picker in our web form and also apply some restrictions that will help us to not allowed future dates on this date picker.

so in the below code we will add bootstrap maxcdn classes and some JavaScript and CSS files in the head section of our web page.

disable future date validation in jquery
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

after that we will use input tag with having a date picker class , so with the help of this class we will disable future dates in our datepicker with the conditions like enable and disable future and pas dates, enable past dates or future dates, disable past or future dates and also we will change the date format as well.

<!DOCTYPE html>
<html>
<head>
	<title>datepciker integration</title>
</head>
<body>
<form>
	<p>Select Date: <input type="text" class="datepicker"></p>
</form>
</body>
</html>

after adding css and js file now we will added most important part of our tutorial, in the below jQuery script we will restrict future dates.

<script type="text/javascript">
$(document).ready(function () {
        var today = new Date();
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose:true,
            endDate: "today",
            maxDate: today
        }).on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });


        $('.datepicker').keyup(function () {
            if (this.value.match(/[^0-9]/g)) {
                this.value = this.value.replace(/[^0-9^-]/g, '');
            }
        });
});

</script>

Allowed only past 30 days or 1 month and enable future dates with 10 years.

<script type="text/javascript">
$(document).ready(function () {
        $('.datepicker').datepicker({
          format: 'yyyy-mm-dd',
          autoclose:true,
          changeYear: true,
          minDate: '-1M',
          maxDate: '10Y',
          });

});
</script>

in the above code we use minDate is -1M that means this scripts allows only 1 Month of past dates, if we want to to enable only 15 days of past dates than we will modify the script like minDate : ’15D’ here D is represent the days.
and the same concept will apply with maxDate so here i allowed 10 year of future date so i used maxDate:’10Y’ ,here Y is represent the years.

if we want to change the date format form yyyy-mm-dd to dd-mm-yyyy than we just simply update on format parameter.

after applying this parameter we can easily disable future dates in our datepicker of web form.

PHP Login Script With Remember me.
Unable to create a directory a wordpress error