How can we do date highlight which we particular disabled using jquery in ui datepicker-CodePudding

Here is my code as below, Please help me to find out solution for add highlight on those dates which I particularly disabled and Sundays.

And Do not want to highlight disabled previous dates from current date.

In this how can add highlights on particular dates which I disabled.

$(document).ready(function(){
 jQuery(function() {
    var blockedDates = ["12/20/2022", "12/28/2022", "12/24/2022", "12/19/2022"];

    var dateFormat = "yy-mm-dd";
    $( "#datepicker" ).datepicker({
     dateFormat:'yy-mm-dd',
     minDate: 0,
     daysOfWeekDisabled: [0, 6],
     onSelect: function(dateStr) {
      var _frmdate = $.trim($(this).val());
      jQuery("#blockModalDateItem").modal("show");
      jQuery("#bk_blockdt").val(_frmdate);
      jQuery(".status_msg").html("");
    },
    beforeShowDay: function(date){
      show = true;
      if(date.getDay() == 0 ){show = false;}
      for (var i = 0; i < blockedDates.length; i  ) {
        if (new Date(blockedDates[i]).toString() == date.toString()) {show = false;}
      }
      var display = [show,'',(show)?'':'Block Settlement Date']; //Disabled Particular dates & all Sundays.
      return display;
    }    
  });
});

CodePudding user response：

You can use CSS to apply styles to disabled dates. Specifically targeting dates with title="Block Settlement Date"

.ui-datepicker-unselectable.ui-state-disabled[title="Block Settlement Date"] {
      background:red;
}

CodePudding user response：

Thank you to all, For giving precious time to help my queries.

But I found my custom solution for my problem & I would like to share here may this will help to others.

New changes added to datepicker in beforeshowday is here, in this i have added custom class.

$(document).ready(function(){
 jQuery(function() {
    var blockedDates = ["12/20/2022", "12/28/2022", "12/24/2022", "12/19/2022"];

    var dateFormat = "yy-mm-dd";
    $( "#datepicker" ).datepicker({
     dateFormat:'yy-mm-dd',
     minDate: 0,
     daysOfWeekDisabled: [0, 6],
     onSelect: function(dateStr) {
      var _frmdate = $.trim($(this).val());
      jQuery("#blockModalDateItem").modal("show");
      jQuery("#bk_blockdt").val(_frmdate);
      jQuery(".status_msg").html("");
    },
    beforeShowDay: function(date){
      show = true;
      if(date.getDay() == 0 ){show = false;}
      for (var i = 0; i < blockedDates.length; i  ) {
        if (new Date(blockedDates[i]).toString() == date.toString()) {show = false;}
      }
      var display = [show,'highlight-bkdate',(show)?'':'Block Settlement Date']; //Disabled Particular dates & all Sundays.
      return display;
    }    
  });
});

In this class i have applied some css for giving highlight purpose.

.highlight-bkdate span {
      color: #fff!important;
      background-color: red!important;
      border: 3px solid #191970!important;
    }

Now this state it will highlight all disabled dates, Now I want to only particular dates & sunday should highlight.

So, I called this function after datepicker load. In this I again removed class on those dates which I do not want to highlight.

setTimeout(removeClassHigh, 50);

function removeClassHigh(){
    var blockedDates = ["12/20/2022", "12/28/2022", "12/24/2022", "12/19/2022"];
    var dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var currentYear = jQuery(".ui-datepicker-year").text();
    var currentMonth = jQuery(".ui-datepicker-month").text();
    var oneMonth = 1;
    var dat = new Date('1 '   currentMonth  ' '  currentYear);
    var monthNo = dat.getMonth();
    oneMonth  = Number(monthNo);
    var f1 = 1;
    var d = new Date();
    var day = d.getDate();

    $('.ui-state-default').each(function () {
      var checkCurrentDt = new Date(oneMonth '/' f1 '/' currentYear);
      var checkThisDay = checkCurrentDt.getDay();
      var checkThisDate = String(checkCurrentDt.getDate()).padStart(2, '0');
      if(day==f1){
        return false;
      }else{
        if(dayNames[checkThisDay]!="Sunday"){
          if (jQuery.inArray(oneMonth '/' checkThisDate '/' currentYear, blockedDates) === -1) {
              $(this).parent().removeClass('highlight-bkdate');
          }
        }
     }
     f1  ;
   });
    
  }

So in this way found this solution.

And Result as below:

Thank you to all..!!

Have a great day :)