Avoid Coral UI datepicker data transformation

[marcjubero]

Hello there!

I'm trying to modify the default validation of a Datepicker, to avoid the following situation:

If I write down something like "blabla-404" when I change the focus to another element, the content is automatically transformed into "0404-01-01 00:00".

What I need is the content to be cleared.

I wrote a validator that looks like this:

(function (document, window, $) {
    "use strict";

    let DATATYPE_REGEX = {
        'date': /(\d{4})-(\d{2})-(\d{2})/gm,
        'time': /(\d{2}):(\d{2})/gm,
        'datetime': /(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2})/gm
    };

    $(".advancedDatePicker__base").each(function() {
        let picker = $(this).find("coral-datepicker");
       
        $(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
            selector: picker,
            validate: dateFormatValidator
        }); 
   });

   function dateFormatValidator(el) {
       let picker = $(el);
       let dataType = picker.attr("type");
       let inputField = picker.find(".coral3-Textfield.coral-InputGroup-input");
       let inputValue = inputField.val();

       let regexValidation = new RegExp(DATATYPE_REGEX[dataType]).exec(inputValue);
       if(regexValidation === null || !(dataType === "time" ? timeTypeValidator(regexValidation) : moment(inputValue).isValid())) {
           inputField.val(undefined);
           inputField.blur();
           return;
       }
   }

   function timeTypeValidator(regexValidation) {
       let hour = parseInt(regexValidation[1]);
       let min = parseInt(regexValidation[2]);
       return (hour >= 0 && hour <= 23) && (min >= 0 && min <= 59);
   }

})(document, window, Granite.$);

The problem is the validator is executed while the user types the date, creating some kind of weird situation deleting the picker content if the user types slowly.

I tried to run the validator when the input field change event is triggered but, at this point, the content is already changed as I said before.

Any clue about how to solve this? Thank you in advance.

[arunpatidar]

Hi,

If you don't want date format then you should use text field to enter custom format dates. Because the date type required complete date format to save in crx de as Date type.

[Theo_Pendle · Accepted solution]

Hi @marcjubero

What version of AEM are you on?

I wasn't able to test your validator because on my 6.5.5 instance, your desired behavior is actually implemented OOTB:

Perhaps it's time to think about an upgrade?