How To Disable Dates After Week In jQuery Datepicker

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

In this tutorial, we will see how to disable dates after a week in jquery datepicker. In the date picker, we can disable dates after a week or month using the jquery UI date picker. The maximum selectable date. When set to null, there is no maximum. If you can set Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

So, let's see how to disable dates after a week in jquery datepicker, jQuery datepicker disable dates after week, after week date disable in datepicker, disable dates in jquery UI datepicker, how to disable date after week or month in the calendar using javascript, bootstrap datepicker disable dates after specific days, datepicker disable future dates in javascript.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>How To Disable Dates After Week 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 Dates After Week 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: "+1w" });
    });
</script>
</html>

 

 

Output:

how_to_disable_dates_after_week_in_jquery_datepicker_output

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Generate PDF From HTML Using TCPDF
Laravel 9 Generate PDF From HT...

In this article, we will see laravel 9 generate PDF from HTML using TCPDF. Here, we will learn how to integrate tcpdf in...

Read More

Jan-31-2023

How to Create Trait in Laravel 10 Example
How to Create Trait in Laravel...

Hello developers! ๐Ÿ‘‹ Today, let's dive into the wonderful world of Laravel 10 and explore one of its handy featu...

Read More

Feb-09-2024

Copy To Clipboard JQuery
Copy To Clipboard JQuery

In this article, we will see how to copy to clipboard jQuery. we will learn how to copy text from textarea&nbs...

Read More

Aug-19-2020

How to Install Node JS and NPM on Ubuntu 22.04
How to Install Node JS and NPM...

Hey fellow Ubuntu enthusiasts! ๐Ÿงโœจ If you're looking to step into the awesome world of Node.js and npm for your web d...

Read More

Jan-12-2024