Datetime xtype field validation

Avatar

Avatar
Give Back 3
Level 2
sawan051
Level 2

Likes

12 likes

Total Posts

33 posts

Correct reply

1 solution
Top badges earned
Give Back 3
Give Back
Ignite 3
Ignite 1
Validate 1
View profile

Avatar
Give Back 3
Level 2
sawan051
Level 2

Likes

12 likes

Total Posts

33 posts

Correct reply

1 solution
Top badges earned
Give Back 3
Give Back
Ignite 3
Ignite 1
Validate 1
View profile
sawan051
Level 2

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
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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
Validate 25
MVP
bsloki
MVP

Likes

182 likes

Total Posts

1,859 posts

Correct reply

545 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 50
Boost 5
View profile

Avatar
Validate 25
MVP
bsloki
MVP

Likes

182 likes

Total Posts

1,859 posts

Correct reply

545 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 50
Boost 5
View profile
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
Validate 1
Level 2
kennyhank
Level 2

Likes

10 likes

Total Posts

36 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
kennyhank
Level 2

Likes

10 likes

Total Posts

36 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
kennyhank
Level 2

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 🙂