How to disable future dates in JavaScript Datepicker?

JavascriptWeb DevelopmentObject Oriented Programming

In order to disable future dates, you need to use maxDate and set the current date. Following is the JavaScript code −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>The selected date is as follows: <input type="text" class="disableFuturedate"></p>
<script>
   $(document).ready(function () {
      var currentDate = new Date();
      $('.disableFuturedate').datepicker({
      format: 'dd/mm/yyyy',
      autoclose:true,
      endDate: "currentDate",
      maxDate: currentDate
      }).on('changeDate', function (ev) {
         $(this).datepicker('hide');
      });
      $('.disableFuturedate').keyup(function () {
         if (this.value.match(/[^0-9]/g)) {
            this.value = this.value.replace(/[^0-9^-]/g, '');
         }
      });
   });
</script>
</body>
</html>

In order to run the above program, I have saved this file with the name index.html. Right click on this file and select option open with live server.

Output

This will run in any modern web browser automatically −

After that, click the mouse on text box, that will display the date picker as in the below screenshot −


raja
Published on 14-Jul-2020 15:28:56
Advertisements