Datetime xtype field validation

Avatar

Avatar

sawan051

Avatar

sawan051

sawan051

12-02-2016

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

12-02-2016

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 

Answers (2)

Answers (2)

Avatar

Avatar

bsloki

MVP

Avatar

bsloki

MVP

bsloki
MVP

12-02-2016

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

Avatar

Avatar

kennyhank

Avatar

kennyhank

kennyhank

12-02-2016

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 🙂