Blog Image

Jquery 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



Author: admin

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.