JustAskVin
Insights

Jquery Date time picker – Show only required dates enabled

HTMLjavascriptjqueryweb development
ByVinod Ram
<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

Turn insight into action

Need help with html or a related project?

If this article sparked an idea, question, or project direction, I can help you turn it into a practical next step.

Start a conversationChat on WhatsApp
Previous articleWhat are the requirement for launching a Online Job portal startupNext articleकैसे AI सिर प्रत्यारोपण के माध्यम से मृत व्यक्ति को जीवित करने में चिकित्सा क्षेत्र में क्रांति ला सकता है

Related reading

Articles connected to this topic

javascript

Custom Validation for Ninja Form – wordpress

Suppose you have used Ninja Form Plugin in your wordprss website. Ninja form provide you the option to validate the fields like email address, phone numbers format and required validation. But in case you have to add any custom validation then Ninja form provide you the hook to implement custom client side validation.

Jan 10, 2025

Read article

apache

401 Response when PHP-FPM Enabled on WordPress CMS

We recently migrated our website to another hosting service running FPM/FastCGI . We noticed under the website CMS -> tools -> Site Health Status , that all our REST API calls were failing authentication. It appeared to turn the request into an request from an Anonymous user even though we passed Basic Authentication h

Jan 2, 2025

Read article

css

How to find selected and unselected item in select2 dropdown

While using select2 library, if you have to find the selected and unselected item based on the change event when you check or uncheck the items. Based on the checked status, you may have to create some custom trigger or events then you can use the below code reference from codepen to achieve the save. [&hellip;]

Dec 1, 2024

Read article

Most recent

Latest posts from the blog

View all articles →