Disable weekends in AEM forms data picker

[harshv7973321]

I am trying to grey out the specific dates in AEM forms datepicker. I am trying to write a custom code to grey out the dates. But nothing seems to be working. Does any one encountered with similar kind of functionality. 

[MayurSatav · Accepted solution]

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

[Kiran_Vedantam]

Hi @harshv7973321 

if the solution suggested by @MayurSatav  doesn't work, please post your query in the forms community here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-forms/ct-p/adobe-experienc...

Thanks,

Kiran Vedantam.