python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions