AEM : Date Picker (/libs/granite/ui/components/coral/foundation/form/datepicker) | Community
Skip to main content
Murali89
Murali89
Level 2
March 27, 2018
Solved

AEM : Date Picker (/libs/granite/ui/components/coral/foundation/form/datepicker)

  • March 27, 2018
  • 6 replies
  • 17625 views

Date Picker - /libs/granite/ui/components/coral/foundation/form/datepicker

Is there a way i can disable past date and time in the date picker? i see there is a property called minDate and maxDate. But i should be setting the current date value to it every time i open the page for editing. i.e If i open the page for edit today minDate should be today, if i open it tomorrow minDate should be tomorrow so that i cannot select today's date tomorrow.

    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 Techaspect_Solu

    Hi,

    You can use JQuery to handle this event.

    Please refer to the following link for understanding how to work with event handlers in AEM for touch-ui dialogs:

    https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html

    For your particular scenario, you can use the following jquery that is invoked when the Touch UI dialog is opened.

    This jQuery will get the current date and add it as the minimum value for the datepicker component:

    (function ($, $document) {

        "use strict";

           $document.on("dialog-ready", function() {

           var d = new Date();

    document.querySelector('coral-datepicker[name="./date"]').setAttribute("min", d.getFullYear() + ", " + (d.getMonth() +1)+ ", " + d.getDate());

        });

    })($, $(document));

    Make sure you give ‘name’ of the datepicker component you want your jQuery to apply to.Create a dialog event handler following the steps in the link above and add this code in the JS file of your listener and the minimum date will be set as the current date.

    Regards,

    TechAspect Solutions

    6 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    March 27, 2018

    There is Value option as well. This is use to set default value of it.

    See DatePicker | CoralUI

    Kautuk Sahni
    Murali89
    Murali89Author
    Level 2
    March 28, 2018

    But it wouldn't help the use case of not allowing to select past date right? Is there any other way if not a custom validator will be the last option.

    Techaspect_Solu
    Techaspect_SoluAccepted solution
    Level 7
    April 3, 2018

    Hi,

    You can use JQuery to handle this event.

    Please refer to the following link for understanding how to work with event handlers in AEM for touch-ui dialogs:

    https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html

    For your particular scenario, you can use the following jquery that is invoked when the Touch UI dialog is opened.

    This jQuery will get the current date and add it as the minimum value for the datepicker component:

    (function ($, $document) {

        "use strict";

           $document.on("dialog-ready", function() {

           var d = new Date();

    document.querySelector('coral-datepicker[name="./date"]').setAttribute("min", d.getFullYear() + ", " + (d.getMonth() +1)+ ", " + d.getDate());

        });

    })($, $(document));

    Make sure you give ‘name’ of the datepicker component you want your jQuery to apply to.Create a dialog event handler following the steps in the link above and add this code in the JS file of your listener and the minimum date will be set as the current date.

    Regards,

    TechAspect Solutions

    smacdonald2008
    smacdonald2008
    Level 10
    April 3, 2018

    Nice response Techaspect Solutions!

      Fanindra_Surat
      Community Advisor
      Fanindra_SuratCommunity Advisor
      Community Advisor
      June 7, 2018

      Hi,

      Know this has been answered but, nevertheless an alternate solution for a similar situation below:

      If your requirement is to restrict the author to not select a past date, but not very strict about past time in the current day, then it could be achieved with the minDate property with value as "today". This disables the past dates selection in the datepicker window however, the author would still be able to select past time on the same day.

      Regards,

      Fani Surat

        T
        taschk89826990
        December 4, 2019

        Hi,

        I have a very similar request, but I cannot get it to work.

        I want to set the minDate value to today's value when a form user (end customer) clicks on the datepicker. This should prevent the form user from entering past dates.

        Could you please point me in the right direction? I tried to use the listener code from Techaspect Solutions​, but I am not sure how to use that function in our actual forms so it gets used.

        R
        rubal-narde-prft
        December 6, 2021

        You can use the following set of code to restrict a user to select previous dates:

        <dateTime
            jcr:primaryType="nt:unstructured"
            sling:resourceType="/libs/granite/ui/components/coral/foundation/form/datepicker"
            emptyText="Date/Time"
            fieldLabel="Date/Time"
            type="datetime"
            minDate="today"
            name="dateTime"/>

        This will disable the earlier dates and user will not be able to select them, as shown in the screenshot below:

          Terms & ConditionsAccessibility statement

          Loading footer...