Bugfix/FOUR-4903: Date Field validation not working with calc prop (For 4.1)

[agustinbusso]

Issue & Reproduction Steps

Issue 1
Validations not working for calculated properties (after date, before date, after or equal date, before or equal date)

Issue 2
Client is returning a date with the format DD/MM/YYYY and should be YYYY-MM-DD as described in the documentation

Issue 3
If you have a datetime input with the value eg. 15/12/2021 11:52 and we want to validate if after (not after or equal) than 15/12/2021 the output should be false becase is not after, is equal date, but is returning true because the currentDate is 15/12/2021 00:00 and the input date is 15/12/2021 11:52. The same happens with the other cases.

Reproduction steps

• Have a screen with a date field
• Add a validation rule "Before or Equal to Date"
• Add a variable in mustache currentDate
• Have a calc prop to return the current date with JS to the variable currentDate

Sample calc property code (set name of the calc property to currentDate):

today = new Date();
var sp = '-';
var dd = today.getDate();
var mm = today.getMonth()+1; //As January is 0.
var yyyy = today.getFullYear();

if(dd<10) dd='0'+dd;
if(mm<10) mm='0'+mm;
// return (dd+sp+mm+sp+yyyy);  First issue detected is that client is returning a date in format DD/MM/YYYY
return (yyyy+sp+mm+sp+dd);

• Go to Preview and select a date Before or equal that currentDate calc property. You will note that validation is not working.

Solution

• When doing moment(get(dataWithParent, before_or_equal, before_or_equal)) searching from before_or_equal index is not finding the key inside dataWithParent because it is passed as {{currentDate}} instead currentDate, so added a regex to remove mustaches {{ }}.
• Added endOf('day') to before_or_equal and after validations to work properly
• Added startOf('day') to after_or_equal and before validations to work properly

How to Test

• Have a screen with a date field
• Add a validation rule "Before or Equal to Date"
• Add a variable in mustache currentDate
• Have a calc prop to return the current date with JS to the variable currentDate
  Use the previous sample calc property code and set name of the calc property to currentDate
• Go to Preview and select a date Before or equal that currentDate calc property. You will note that validation is working now. Please test it with After date, After or equal date, before date and Before or equal date.

Working video

Screen.Recording.2021-12-15.at.15.27.25.mov

Related Tickets & Packages

• FOUR-4903

[caleeli]

• Do not strip the mustache tags, use Mustache.render to complete the functionality.
• Do not change the time before to do the comparison, it works as expected.