Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Disable weekends in AEM forms data picker

Avatar

Level 1

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. 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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

Avatar

Community Advisor

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.