Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Murali89
Level 3
Level 3

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.

1 Accepted Solution
Techaspect_Solu
Correct answer by
Level 7
Level 7

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

View solution in original post

7 Replies
kautuk_sahni
Employee
Employee

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

See DatePicker | CoralUI

Murali89
Level 3
Level 3

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
Correct answer by
Level 7
Level 7

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

View solution in original post

fanindras
Level 5
Level 5

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
Level 1
Level 1

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
Level 1
Level 1

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:

rubalnardeprft_1-1638793868154.png