How to disable future dates in JavaScript Datepicker?

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


 Live Demo

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

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.


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 −

Updated on: 14-Jul-2020

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started