disabling specific dates from html datepicker jquery
49,028
Try this, run this code below. The first date I added a 0 to the day so that it will match the formatting in the comparison.
/** Days to be disabled as an array */
var disableddates = ["20-05-2015", "12-11-2014", "12-25-2014", "12-20-2014"];
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
/*
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
// First convert the date in to the mm-dd-yyyy format
// Take note that we will increment the month count by 1
var currentdate = (m + 1) + '-' + d + '-' + y ;
// We will now check if the date belongs to disableddates array
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1 ) {
return [false];
}
}
}*/
$(function() {
$("#date").datepicker({
beforeShowDay: DisableSpecificDates
});
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<input id="date" type="text">
</body>
</html>
Author by
zouzou b lebiane
Updated on June 12, 2020Comments
-
zouzou b lebiane almost 4 years
hey guys i am trying to set a datepicker in my webpage and disable some dates from it so it can't be showing
this is the code:<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="jquery-ui/jquery-ui.css" rel="stylesheet"> <script src="jquery-ui/external/jquery/jquery.js" ></script> <script src="jquery-ui/jquery-ui.js"></script> <script> /** Days to be disabled as an array */ var disableddates = ["20-5-2015", "12-11-2014", "12-25-2014", "12-20-2014"]; function DisableSpecificDates(date) { var m = date.getMonth(); var d = date.getDate(); var y = date.getFullYear(); // First convert the date in to the mm-dd-yyyy format // Take note that we will increment the month count by 1 var currentdate = (m + 1) + '-' + d + '-' + y; // We will now check if the date belongs to disableddates array for (var i = 0; i < disableddates.length; i++) { // Now check if the current date is in disabled dates array. if ($.inArray(currentdate, disableddates) != -1) { return [false]; } } } $(function () { $("#date").datepicker({ beforeShowDay: DisableSpecificDates }); }); </script> </head> <body> <input id="date" type="text"> </body> </html>
but it is not working for some reason... the date picker don't even show can someone plz help
-
Fabiano about 9 yearsPlease, post the javascript error that appears on your console. Did you try to use the Developer Tools in Chrome or something similar?
-
-
Muhammad Omer Aslam almost 6 yearsthis does not even open datepicker