Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to disable future dates in JavaScript Datepicker?

Javascript Web Development Object Oriented Programming

Disabling future dates in a JavaScript datepicker prevents users from selecting dates beyond today. This is commonly needed for applications like booking systems, report generators, or any form where only past or current dates are valid.

Understanding the maxDate Property

The maxDate property sets the maximum selectable date in a datepicker. By setting it to the current date, all future dates become disabled and unclickable.

Example: jQuery UI Datepicker

<!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>Disable Future Dates</title>
</head>
<body>
    <p>Select a date (future dates disabled): <input type="text" id="datepicker" readonly></p>
    
    <script>
    $(document).ready(function() {
        $('#datepicker').datepicker({
            dateFormat: 'dd/mm/yy',
            maxDate: 0, // 0 means today, -1 would be yesterday
            changeMonth: true,
            changeYear: true,
            showAnim: 'slideDown'
        });
    });
    </script>
</body>
</html>

Alternative Method: Using Date Object

<!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>Disable Future Dates - Method 2</title>
</head>
<body>
    <p>Select a date: <input type="text" id="datepicker2" readonly></p>
    
    <script>
    $(document).ready(function() {
        var today = new Date();
        
        $('#datepicker2').datepicker({
            dateFormat: 'dd/mm/yy',
            maxDate: today,
            changeMonth: true,
            changeYear: true
        });
    });
    </script>
</body>
</html>

Key Properties for Date Restrictions

Property Description Example
maxDate Sets maximum selectable date maxDate: 0 (today)
minDate Sets minimum selectable date minDate: '-1y' (1 year ago)
dateFormat Display format for selected date 'dd/mm/yy'

Common Use Cases

This technique is useful for:

  • Birth date selection forms
  • Report date range selectors
  • Event registration with past date requirements
  • Invoice or transaction date entries

Conclusion

Use maxDate: 0 in jQuery UI datepicker to disable future dates effectively. This ensures users can only select today or earlier dates, maintaining data validity in your applications.

Updated on: 2026-03-15T23:18:59+05:30

14K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements