<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
Vinod Ram has been in Software Industry since 2006 and has experience of over 16 years in Software Development & Project Management domain specialised majorly in LAMP stack & Open Source Technology, building enterprise level Web based Application, Large Database driven and huge traffic Websites and Project Management.
He loves to write information articles and blog to share his knowledge and experience with the outside world and help people to find solution for their problems.