Datetime xtype field validation | Community
Skip to main content
sawan051
sawan051
New Participant
February 12, 2016
Solved

Datetime xtype field validation

  • February 12, 2016
  • 3 replies
  • 2493 views

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.

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 smacdonald2008

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 replies

smacdonald2008
smacdonald2008Accepted solution
New Participant
February 12, 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 

Lokesh_Shivalingaiah
Lokesh_Shivalingaiah
New Participant
February 12, 2016

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

kennyhank
kennyhank
New Participant
February 12, 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 :) 

Terms & ConditionsAccessibility statement

Loading footer...