Jquery UI Datepicker Disable Specific Dates Example

Jqury UI

Nicesnippets

21889

19-06-2020


Jquery UI Datepicker Disable Specific Dates Example

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...