CODEWITHSUNDEEP
javascriptinput-maskimaskjs
Patrick Cerny
Patrick Cerny

Reputation: 478

Masked Input - Date Picker

I want to develop an date picker with using the InputMask.js library and blazor. We've been using it for various input field in our application, so setting the library up isn't really the problem.

In our design, we've specified that in input field should use the native browser date-picker from the <input type="date"/> as seen here.

Now to the question: How does one impement a native-date picker with iMask.js? I've been searching for quite a while and I haven't any examples. Whenever I try to add a mask-id to the input and bind it as such:

HTML

<input type="date" id='date-mask'/>

JS

let mask = IMask(
  document.getElementById('date-mask'),
  {
    mask: Date,
    min: new Date(1990, 0, 1),
    max: new Date(2025, 0, 1),
    lazy: false
  }
);

after clicking on the date-picker, the date does not apply and it throws a warning saying:

Element value was changed outside of mask. Syncronize mask using mask.updateValue() to work properly.

Trying to bind the onchange event doesn't even work and the event is not fired. Maybe it's because im taking over someone elses code (who shall remain nameless) or maybe it's just me - but I can't seem to figure it out.

TLDR

How does one implement a native date-picker with the validation of imask.

Upvotes: 0

Views: 556

Answers (0)

Related Questions