[Custom Input Masks] Date Mask with On Change Inputs

Hello guys,

I've come across an issue when using the Date Mask with an input that has an On Change event associated with it. Whenever I try to manually enter the date, the On Change event is triggered as expected but the cursor jumps to the end of the year part of the date mask (check image below to better understand the issue).

I was able to work around this issue by having the On Change action bound to a hidden button and click on that button through JS although not the most pleasant solution. I'm not sure if this is an use case not covered by the code of the component so I thought I could share this feedback with you.

Hi Filipe,

Recently I also had this problem for currency mask. My solution was to make the input KeepMask = True and use this on AdvanceOptions {autoUnmask:true}. So to fix your problem you would need to change the MaskDate and include a input KeepMask and on the js wrap the below code with a if like this "if (keepMask == "False") {"

SyntaxEditor Code Snippet

    var Base_OsPage_ClientValidate = OsPage_ClientValidate;
    OsPage_ClientValidate = (function (srcElement, cleanOnlySrcElementErrors) {
        $(elementID).inputmask('remove');
        var result = Base_OsPage_ClientValidate(srcElement, cleanOnlySrcElementErrors);
        $(elementID).inputmask(dateFormat, maskOpts);
        return result;
    });

    osAjaxBackend.BindBeforeSubmit(function () {
        $(elementID).inputmask('remove');
    });
    osAjaxBackend.BindAfterSubmit(function () {
        $(elementID).inputmask('remove');
        $(elementID).inputmask(dateFormat, maskOpts);
    });

Hope this helps,

Regards,

Marcelo

Beware of these undocumented calls to osAjaxBackend. They may break without notice.

Hi João,

That JS is already on the component.  I'm just saying you don't need to run all that code if you use on AdvanceOptions {autoUnmask:true}

Regards,

Marcelo

Marcelo Ferreira wrote:

    var Base_OsPage_ClientValidate = OsPage_ClientValidate;
    OsPage_ClientValidate = (function (srcElement, cleanOnlySrcElementErrors) {
        $(elementID).inputmask('remove');
        var result = Base_OsPage_ClientValidate(srcElement, cleanOnlySrcElementErrors);
        $(elementID).inputmask(dateFormat, maskOpts);
        return result;
    });

    osAjaxBackend.BindBeforeSubmit(function () {
        $(elementID).inputmask('remove');
    });
    osAjaxBackend.BindAfterSubmit(function () {
        $(elementID).inputmask('remove');
        $(elementID).inputmask(dateFormat, maskOpts);
    });

Hi Marcelo. 

I followed this solution but it still happens the same. When typing, for example, 0 it sends the cursor automatically to the end of the field. [Date Mask]

I found another issue. Sometimes the cursor changes automatically to the next position after 3/4 seconds without changing anything. [Date Mask]

Do you have any idea on how to solve these issues?

Thanks.

Hi Gustavo,

Do you have the latest version installed? Because all this is fixed in that version.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Marcelo

I hadn't the latest version, my bad. Anyway, I updated and I keep facing the same issues.

I will take a deeper look, maybe I am passing the parameters wrongly.

Regards,

Gustavo

Hi Gustavo,

I used the same configurations as you and I wasn't able to reproduce it. If you can create a simple module that reproduce this behavior and I will look into it.

Regards,

Marcelo