Is there way to grey out some dates from AEM forms datepicker | Community
Skip to main content
harshv7973321
harshv7973321
May 26, 2023
Solved

Is there way to grey out some dates from AEM forms datepicker

  • May 26, 2023
  • 2 replies
  • 905 views

I am trying to disable/grey out public holidays and weekends in AEM forms datepicker. I am trying to add the code on the initialize method. Any snippets

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SivakumarKanoori

@harshv7973321 : I think, this cannot be achieve through AEM datepicker component. 

<input type="date" id="${guideid}${"_widget"}" name="${guide:encodeForHtmlAttr(guideField.name,xssAPI)}"
value="${guide:encodeForHtmlAttr(guideField.value,xssAPI)}" style="${guide:encodeForHtmlAttr(guideField.widgetInlineStyles,xssAPI)}"
min="${guide:encodeForHtmlAttr(guideField.minimumDate,xssAPI)}"
max="${guide:encodeForHtmlAttr(guideField.maximumDate,xssAPI)}"/>

 

we can pass only  min and max . 

If you still need to achieve , then you can try to implement customized datepicker for your use case.

 

Thanks,

Siva

2 replies

Pulkit_Jain_
Adobe Employee
Pulkit_Jain_Adobe Employee
Adobe Employee
May 30, 2023

@harshv7973321 

I haven't tried this and don't have a reference implementation. Still, you can use moment.js as the client library[0] and make the necessary changes[1] for specific dates by defining an Array containing dates and using this Array to decide whether or not to disable dates.

 

[0] - https://forms.life/2020/06/10/adaptive-forms-date-techniques-with-moment-js/ 

[1] - https://stackoverflow.com/questions/49818429/how-to-disable-the-selected-and-previous-date-in-moment-js-calendar 

    SivakumarKanoori
    Community Advisor
    SivakumarKanooriCommunity AdvisorAccepted solution
    Community Advisor
    May 31, 2023

    @harshv7973321 : I think, this cannot be achieve through AEM datepicker component. 

    <input type="date" id="${guideid}${"_widget"}" name="${guide:encodeForHtmlAttr(guideField.name,xssAPI)}"
    value="${guide:encodeForHtmlAttr(guideField.value,xssAPI)}" style="${guide:encodeForHtmlAttr(guideField.widgetInlineStyles,xssAPI)}"
    min="${guide:encodeForHtmlAttr(guideField.minimumDate,xssAPI)}"
    max="${guide:encodeForHtmlAttr(guideField.maximumDate,xssAPI)}"/>

     

    we can pass only  min and max . 

    If you still need to achieve , then you can try to implement customized datepicker for your use case.

     

    Thanks,

    Siva

    Thanks,Siva
      Terms & ConditionsAccessibility statement

      Loading footer...