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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^