How To Disable Specific Dates In jQuery Datepicker

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

In this tutorial, we will see how to disable specific dates in jquery datepicker. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

So, let's see disable specific dates in datepicker, jquery datepicker disable specific dates, how to disable particular date in datepicker using jquery, jquery UI datepicker disable dates, disable dates in datepicker jquery UI, jquery UI datepicker disable specific dates, how to disable date in datepicker.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>How To Disable Specific Dates 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 Specific Dates In jQuery Datepicker - Websolutionstuff</h2>
    <div class="container">
        <label>Select Date :</label>
        <input type='text' class='date'>
    </div>
</body>
<script type="text/javascript">
    var array = ["01-06-2022","02-06-2022","23-06-2022","24-06-2022"]
    $('input').datepicker({
        beforeShowDay: function(date){
            var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
            return [ array.indexOf(string) == -1 ]
        }
    });
</script>
</html>

 

 

Output:

how_to_disable_specific_dates_in_jquery_datepicker_output

 


You might also like:

Recommended Post
Featured Post
How to Use ngStyle in Angular for Dynamic Styling?
How to Use ngStyle in Angular...

A user-friendly and dynamic interface is paramount to engaging users on your site. Angular is one of the most powerful a...

Read More

Oct-04-2023

How To Create Dynamic Bar Chart In Laravel 9
How To Create Dynamic Bar Char...

In this article, we will see how to create a dynamic bar chart in laravel 9. Bar charts are used to represent...

Read More

Mar-21-2022

Laravel 8 Socialite Login with Facebook Account
Laravel 8 Socialite Login with...

In this tutorial, we will learn laravel 8 socialite login with facebook account, as you all know currently many websites...

Read More

Mar-08-2021

Laravel 9 Pluck Method Example
Laravel 9 Pluck Method Example

In this article, we will see laravel 9 pluck method example. The pluck method retrieves all of the v...

Read More

Jul-20-2022