Datetime xtype field validation

[#1]

I am new to AEM, using 2-datetime xtypes fields on same dialog.

1. StartTime: xtype-datetime (Start time for some event)

2. EndTime: xtype-datetime (End time for same event)

Now i need to validate above 2-fields: that once start time is entered by the user the end time should not be less than start time, means end time should always come after start time. If the user enters end time less than start time, on click of OK button it should throw an error msg saying "Pls choose End Time after start time".

Can anyone help me on validating the above scenario.?...Thanks in advance.

[#2 · Accepted solution]

TO perform this - you need to write a custom xtype using this data type. Then in the JS of the custom xtype- you need to write JS logic to compare dates. See this AEM community article to learn how to write a custom xtype:

https://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

You will be using this xtype: 

https://docs.adobe.com/content/docs/en/cq/5-6-1/widgets-api/index.html?class=CQ.Ext.form.DateField

Use JS App logic like this to compare dates: 

http://stackoverflow.com/questions/492994/compare-two-dates-with-javascript

Hope this helps 

[#3]

You can use write a listener for each of the widget and write a JS to do the validation

[#4]

Possible solution:

In my experience in software development throw to many msg windows its to tedious  for the user, so i propose you may the first StartTime enable, but the second disable, so you need create a listeners node in your component's dialog, in there you may validate your widgets (both fields), maybe enabled the second field when you lost the focus in your first field, or something. Other idea is use those Datetime methods getValue() for obtain the value in your first, and startValue() to match the initial value in your second.

Other xtype "dateField" has other methods like setMinValue() and setMaxValue(), this xtype look pretty good too. So you can do whatever you want in the "listeners" node in your component's dialog. Hope this help you a litle 🙂