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

[Murali89]

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.

[kautuk_sahni]

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

See DatePicker | CoralUI

[Murali89]

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 · Accepted solution]

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]

Nice response Techaspect Solutions!

[Fanindra_Surat]

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

[taschk89826990]

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.

[rubal-narde-prft]

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: