hi @harshv7973321 ,
you need to implement the custom datepicker behavior,write JavaScript code that targets the datepicker component and modifies its behavior. You can use JavaScript libraries like jQuery or plain JavaScript to achieve this. Within the code, you can define the specific dates that you want to grey out by
Here's an basic example -
$(document).ready(function() {
// Target the datepicker component by its ID or class
var datePicker = $('#datepicker');
// Define the specific dates to be greyed out
var disabledDates = ['2023-05-30', '2023-06-10', '2023-06-15'];
// Iterate through the disabled dates and apply the greyed-out style
disabledDates.forEach(function(date) {
datePicker.find('td[data-date="' + date + '"]').addClass('disabled');
});
});
In this example, the disabled CSS class is added to the table cells (td) corresponding to the specified disabled dates, which can be styled to appear greyed out. Remember to adjust the code based on the specifics of your datepicker component and the structure of your AEM form.
Take a look at this thread also, it could be helpful.
https://github.com/uxsolutions/bootstrap-datepicker/issues/329
