Alias with datetime and long months is not working properly

[stsrki]

I'm not sure if this is a bug or if I am missing something.

I have a simple mask with the following options.

picker.inputMask = new Inputmask({
    alias: "datetime",
    inputFormat: "dd.mmmm.yyyy"
});

picker.inputMask.mask(picker.altInput);

The input is rendered as following

For some reason, the year part is lost completely, and the month part is moved from the center to the far right. Notice the dots in the middle. Does anyone know what might be wrong here?

User version: 5.0.9-beta.35

[RobinHerbots]

@stsrki ,

The problem is like

Not yet implemented :)

[stsrki]

Any change it could be done in a timely manner?

Ps. Would you be interested in working on contractor basis for this, and any future requests?

[RobinHerbots]

@stsrki,

Working on contract basis is not that simple as just saying yes, .... a donation can change priorities ;-)

Anyway, I did a first attempt for the implementation. Can you have a try. You need to take the file from the dist folder.

[stsrki]

a donation can change priorities ;-)

Will do :)

---

Anyways. There are still some issue.

1. The long month with the format mmmm/dd/yyyy is fully broken. See an image. There are some extra tokens in the middle of the mask
2. The short format, mmm/dd/yyyy works for all month names except for the dec. I cannot write it.

[RobinHerbots]

2394

[stsrki]

1. Writing dec now works. But there is now a problem when we try to enter an invalid value. To reproduce just write jan and then 4.

---

2. Regarding the long format, mmmm/dd/yyyy. It still shows the wrong mask.

[RobinHerbots]

Also see #2277

[RobinHerbots]

@stsrki , Can you have a try with v5.0.9-beta.45.

[stsrki]

I've tried v5.0.9-beta.45, but unfortunately, the same errors are still happening.

[RobinHerbots]

Can you remove the placeholder property and try the long datetime mmmm/dd/yyyy

[RobinHerbots]

I didn't tested the first issue yet. I will have a look at that too.

[stsrki]

Without the placeholder, it looks like this

[RobinHerbots]

Are you sure you are using the latest version? Can you create a codepen or fiddle.

[stsrki]

Yes, I have downloaded the latest version. Also, I cleared the cache to make sure the latest files are being used.

Can you create a codepen or fiddle.

Give me some time to do so.

[RobinHerbots]

Directly try with 5.0.9-beta.46, this fixes the first issue.

[stsrki]

Can confirm the first issue is now fixed 🎉

[stsrki]

Hello @RobinHerbots

Since this is the continuation of the same feature, I don't think there is a need to open a new issue.

Input masks now mostly work, except for the long formats. However, the main issue that we got reported by the users is that the edit mask is case-sensitive.

For example:

Works if you type in for 7th July 1967,

07 Jul 1967

or

7 Jul 1967

But not

07 JUL 1967

or 07 jul 1967

Seems the month name is case-sensitive.

it's hard to get the user to type Jul in the correct case (capital J, lowercase ul).

---

PS. the contractor offer is still open if you're willing to do so. Otherwise, donations are also OK but it gets complicated when paying with the company.

[RobinHerbots]

@stsrki,

Strange, using inputFormat: dd mmm yyyy seems to accept Jul jul JUL even jUL JuL, ... UX wise this is not good, should I force it to lowercase? whatever you type?

For the long datetime format, I know exactly what is the problem, but I still need to find the time to figure, how to deal with that.

[stsrki]

Well, from the regular user perspective, they should not bother with writing the exact title-cased names. So making it case-insensitive would be the best way forward. To have it accept any value, Jul jul JUL, etc.

[RobinHerbots]

Hi @stsrki ,

I did some fixes for the long date format.

Can you have a try with the latest beta.

Best regards, Robin

[stsrki]

Hello, sorry for not responding sooner. I was out of the town.

Anyway, I tried the new version, and I don't think it still works. Here are my observations. (Image for context)

1. The long-date mask is still invalid. Notice the /ry/ in the mask
2. After I type the month name, it changes to an invalid name. Februa0y
3. For some reason, it now shows an input mask below the input. Is this for debugging purposes?
4. There are a lot of console logs(see image)

[RobinHerbots]

Grr, I forgot to remove the console .log ;-)

Ok I tested with dd mmmm yyyy, there it should work ok, when using mmmm dd yyyy indeed I see the problem.

[RobinHerbots]

@stsrki ,

Tadaa, another attempt v5.0.9-beta.53

[stsrki]

Unfortunately, I still see the same problem 😅

The mask is mmmm/dd/yyyy.

[RobinHerbots]

Can you have a try with this codepen.

https://codepen.io/robinherbots/pen/VwNbmNP

Btw when using the colormask.js, you also need to include the colormask.css (and it is still experimental, .... awaiting some feedback, from someone, ...)

[stsrki]

The codepen seems to work.

Btw when using the colormask.js, you also need to include the colormask.css (and it is still experimental, .... awaiting some feedback, from someone, ...)

Is this why the text shows bellow the input? I can review it, just let me know the details.

• How to enabled/disable it?
• Can I control the colors?
• anything else I need to know?

[RobinHerbots]

@stsrki , For the color mask we can best continue on #2310.

The codepen is working so I can conclude this issue is fixed?

[stsrki]

Maybe not just yet. While the codepen works it is really basic example so I went to see what is different from my code. With only inputFormat it works. But when I also assign the placeholder then it doesn't work.

Just use this on codepen and you will see it:

Inputmask("datetime", {
        inputFormat: "mmmm/dd/yyyy",
        placeholder: "mmmm/dd/yyyy",
    }).mask("input");

[RobinHerbots]

Yes, true. To be able to handle the dynamic length in the long date format the placeholder is generated based on the inputformat, but this only happens when not providing a placeholder of your own. The best approach will be ignoring the provided placeholder in this case.

Or is there a case for a custom input placeholder in the datetime alias? I will currently ignore when using the long date format.

[stsrki]

In our project, developers can define the placeholders as they wish. So there is a need for it to work along with inputFormat.

[RobinHerbots]

@stsrki ,

Version 5.0.9-beta.67 can handle custom placeholders for the datetime alias.

Can you have a try.

[stsrki]

I can confirm this is now working properly 🎉

@RobinHerbots, thank you for not giving up!