Published:
June 20, 2024Jquery Date time picker – Show only required dates enabled
<html>
<head>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js”></script>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css”>
</head>
<body>
<script>
jQuery(document).ready(function(){
var allowedDate = [“02-06-2024″,”03-06-2024″,”04-06-2024”];
jQuery(‘#date-needed’).datetimepicker({
format: ‘Y-m-d’,
timepicker:false,
// maxDate: ”,
onShow:function( ct ){
this.setOptions({
// minDate: ‘-11d’,
})
},
minDate: new Date(2024,6-1,2), // this will show only the date starting fro 2 June 2024
maxDate: new Date(2024,6-1,19), // this will show only date till 19 June 2024
defaultDate: new Date(2024,6-1,6), // this will force thedefault selected date
beforeShowDay: function(date) { // This will show only those day that are declared under allowedDate array
var currentDate = (“0” + date.getDate()).slice(-2) + “-” + (“0” + (date.getMonth()+1)).slice(-2) + “-” + date.getFullYear();
return jQuery.inArray(currentDate, allowedDate) === -1 ?[false, “notav”, “Not Available”]:[true, “av”, “Available”];
}
});
});
</script>
<input type=”text” id=”date-needed”>
</body>
</html>
You can check the live example here
