Why is Inputmask not properly handling a date?

Question

Glancing through the source, it looks like loading the date extensions should allow me to use a mask like mm/dd/yyyy.

Expected behavior: clicking into the field should allow me to enter something like 12/25/2018, replacing the mask with my input as I type.

Actual behavior: clicking into the field populates the field with the mask, but places my cursor at the end and does not allow me to type.

Inputmask().mask("input");

<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.date.extensions.js"></script>

<input id="input" data-inputmask="'mask': 'mm/dd/yyyy'" />

The documentation for this library is extensive, but doesn't outline an example for my specific mask. I'm reading through the source, but thought I would toss the question here for folks more familiar with this library.

(Note: I've tagged this jquery-inputmask, which refers to this library which can now operate with or without jQuery.)

I don't believe `m`, `d`, or `y` are recognized as "replacement characters". Instead you have to specify that what you want there are *digits*, which can be done using `9`. For example, `99/99/9999`. **Or**, it says that the `date` extension (which you've included) allows you to simply use the alias `date`. — Tyler Roper, Dec 20 '18 at 18:41

score 5 · Accepted Answer · answered Dec 20 '18 at 18:53

5

I've never used this library but I composed this from the docs you linked:

Inputmask().mask("input");

<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.date.extensions.js"></script>

<input id="input" data-inputmask="'alias': 'datetime', 'inputFormat': 'dd/mm/yyyy'" />

answered Dec 20 '18 at 18:53

Álvaro González

142,137
41
261
360

Thanks, I think this is the "proper" solution. I wish the documentation dived deeper than the blurb under the "format" header. I also wish it handled `12/31/1994` correctly - not jumping to the year after I enter `3`. BUT this looks like the best possible solution with this library. – crenshaw-dev Dec 20 '18 at 18:58
1

`12/31/1994` is in US format thus doesn't match `dd/mm/yyyy` so it makes perfect sense that after typing `123` you get `12/03/yyyy`. It think that part is right. On the other side, documentation certainly assumes you're already familiar with the library. – Álvaro González Dec 22 '18 at 10:28
Wow, I spent like two hours staring at the thing, then assumed the library had it wrong. Thanks for catching that! – crenshaw-dev Dec 22 '18 at 13:05

ic3b3rg · Answer 2 · 2018-12-20T18:50:43.187

2

'mm/dd/yyyy' should be the placeholder and '99/99/9999' should be the mask:

Inputmask().mask("input");

<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.date.extensions.js"></script>

<input id="input" data-inputmask="'mask': '99/99/9999', 'placeholder': 'mm/dd/yyyy'" />

Alternatively, you could use a date input:

<input type='date' />

edited Dec 20 '18 at 18:50

answered Dec 20 '18 at 18:44

ic3b3rg

14,629
4
30
53

1

That _may_ be the best option available for this plugin. But it would allow the user to type `55/55/5555`, which is not a valid date. It would also disallow `5/5/1995`, requiring the user to specify `05/05/1995`. Again that _may_ be the best case scenario, but I feel like this library must be more powerful than that. – crenshaw-dev Dec 20 '18 at 18:47
Have you considered using a `date` input? - see the example in my updated answer – ic3b3rg Dec 20 '18 at 18:51
That was my first go at it, but (poor support)[https://caniuse.com/#feat=input-datetime] drove me toward masking. – crenshaw-dev Dec 20 '18 at 18:54
it looks like `"'alias': 'datetime', 'inputFormat': 'dd/mm/yyyy'"` is a better solution – ic3b3rg Dec 20 '18 at 18:56
Seems so, though not perfect (see my comment on that answer). Thanks for the suggestion anyhow! – crenshaw-dev Dec 20 '18 at 18:59

score 0 · Answer 3 · answered Dec 20 '18 at 18:54

You've included the date extension, allowing you to do { alias: "datetime", inputFormat: "dd/mm/yyyy"}.

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

<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.date.extensions.js"></script>

<input />

Why is Inputmask not properly handling a date?

3 Answers3