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

Question

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;
}
});
});

Answer 1

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;
}

Answer 2

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 :)