Full Stack Solutions

Disable a Date Range in Jquery Datepicker in Angular JS

This Article is regarding the disabling the date range of a date picker in Jquery UI Datepicker.There are two methods which we have used in the calendar.

  • numberOfMonths : You can use numberOfMonths option it’s the number of months to show at once.
  • beforeShowDay : that indicating either the date is selectable or not.[1] equal to a CSS class name or “” for the
    default presenation and [2] an optional popup tooltip for this date.It is called for each day in
    the datepicker before it is displayed.

First take the Array of Disable Date

          // May be used to "force" the 12 months calendar to display 2016
          //minDate: new Date(2016, 1 -1, 1),
          //maxDate: new Date(2016, 12 -1, 31),

        beforeShowDay: function(date){
            // For each calendar date, check if it is within a disabled range.
            for(var i=0;i<disableDateArray.length;i++){
            // Get each from/to ranges
            var From = disableDateArray[i].from.split("/");
            var To = disableDateArray[i].to.split("/");
            // Format them as dates : Year, Month (zero-based), Date
            var FromDate = new Date(From[2],From[1]-1,From[0]);
            var ToDate = new Date(To[2],To[1]-1,To[0]);
            // Set a flag to be used when found
            var found=false;
            // Compare date
            if(date>=FromDate && date<=ToDate){
                return [true, "red"]; // Return false (disabled) and the "red" class.
        //At the end of the for loop, if the date wasn't found, return true.
            return [false, ""]; // Return true (Not disabled) and no class.

     onSelect: function(dateText, inst) { 
      console.log("You clicked");




You can check the Dynamic Approach of this method from the Fiddle :

  • gridlove_ad_300x250.jpg