Skip to content

All topics  /  jQuery

Jquery UI Datepicker Disable Specific Dates Example

jQuery ·

Hi Guys,

In this example,I would like to share you use datepicker disable specific dates in jquery ui. you can easy use disable specific date in jquery ui.

if you need disable specific date in datepicker using jquery ui.i am going to explain you how to disable specific date in jquery ui.

Example :


<!DOCTYPE html>
<html>
<head>
    <title>Jquery UI Datepicker Disable Specific Dates Example</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:25%;
            border:2px solid #000;
            text-align: center;
        }
        input{
            padding:5px;
        }
        h2{
            text-align: center;
        }
        body{
            background-color: #81eace;
        }
    </style>
</head>
<body>
    <h2>Jquery UI Datepicker Disable Specific Dates Example - Nicesnippets.com</h2>
    <div class="container">
        <label>Date :</label>
        <input type='text' class='date'>
    </div>
</body>
<script type="text/javascript">
    var array = ["01-06-2020","02-06-2020","03-06-2020","15-06-2020"]
    $('input').datepicker({
        beforeShowDay: function(date){
            var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
            return [ array.indexOf(string) == -1 ]
        }
    });
</script>
</html>

It will help you...

More on this topic