How To Disable Future Date In jQuery Datepicker

Websolutionstuff | Jun-17-2022 | Categories : Laravel PHP jQuery

In this tutorial, we will see how to disable future dates in jquery datepicker. In the date picker, today's date after any future date will be disabled using the jquery UI date picker. The jquery UI Datepicker is easy to customize as per requirements.

So, let's see jquery datepicker disable future dates, future date disable in datepicker, disable future dates in jquery UI datepicker, how to disable future date in calendar using javascript, bootstrap datepicker disable future dates, datepicker disable future dates in javascript, how to disable future date in input type date, how to set max date in datepicker, how to set max date as current date in datepicker, jquery ui datepicker maxdate today.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>How To Disable Future Date In jQuery Datepicker - Websolutionstuff</title>
    <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <style type="text/css">
        .container{
            border-radius: 5px;
            padding:50px 20px;
            margin:30px auto;
            width:40%;
            border:2px solid #bbb;
            text-align: center;
        }
        input{
            padding:5px;
            background-color:#eeeeee;
        }
        h2{
            text-align: center;
            margin-top: 100px;
            font-weight: 600;
        }        
    </style>
</head>
<body>
    <h2>How To Disable Future Date In jQuery Datepicker - Websolutionstuff</h2>
    <div class="container">
        <label>Select Date :</label>
        <input type="text" id="datepicker">
    </div>
</body>
<script type="text/javascript">
    $(function() {
        $( "#datepicker" ).datepicker({  maxDate: new Date() });
    });
</script>
</html>

 

 

Output:

how_to_disable_future_date_in_jquery_datepicker_output

 


You might also like:

Recommended Post
Featured Post
Laravel 8 Many To Many Polymorphic Relationship
Laravel 8 Many To Many Polymor...

In this tutorial we will see laravel 8 many to many polymorphic relationship. many to many polymorphic relationship more...

Read More

Nov-22-2021

How To Disable Dates After Week In jQuery Datepicker
How To Disable Dates After Wee...

In this tutorial, we will see how to disable dates after a week in jquery datepicker. In the date picker, we can di...

Read More

Jun-29-2022

How To Drop Foreign Key In Laravel 10 Migration
How To Drop Foreign Key In Lar...

In this article, we will explore the process of removing foreign key constraints in Laravel 10 migrations. We will delve...

Read More

Apr-28-2023

Laravel 9 Autocomplete Search from Database
Laravel 9 Autocomplete Search...

In this article, we will see laravel 9 autocomplete search from the database. Using ajax autocomplete textbox in la...

Read More

Mar-14-2022