Days to be disabled as an array

jQuery UI Datepicker - Disable specific days

Hello everyone, Today's I am going to share the code-sample for disable specific days of jQuery UI Datepicker

The example in detail as given below.

Date Picker HTML code

<input id="datepickerWithDisabledDate" />

Date Picker JavaScript code sample
<script>
    // List of days to be disabled as an array.
    var disabledDates = ["10-3-2015", "10-11-2015", "10-25-2015", "12-20-2014"];

    function disableSpecificDates(date) {

        var month = date.getMonth();
        var day = date.getDate();
        var year = date.getFullYear();

        // First converted to date to our format date like (mm-dd-yyyy) etc.
        //After that we will increment the months count by 1.
        var currentdate = (month + 1) + '-' + day + '-' + year;
        return [$.inArray(currentdate, disabledDates) == -1];
    }

    $("#datepickerWithDisabledDate").datepicker({
             beforeShowDay: disableSpecificDates
    });

</script>

The output result, you can seen in the below calendar 20 Oct is disabled.

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.