Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Avoid Coral UI datepicker data transformation

marcjubero
Level 1
Level 1

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.

1 Accepted Solution
Theo_Pendle
Correct answer by
Community Advisor
Community Advisor

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:

 

Peek 2020-08-22 16-23.gif

Perhaps it's time to think about an upgrade? 😉

View solution in original post

2 Replies
Arun_Patidar
Community Advisor
Community Advisor

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
Correct answer by
Community Advisor
Community Advisor

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:

 

Peek 2020-08-22 16-23.gif

Perhaps it's time to think about an upgrade? 😉

View solution in original post