Date input on iOS Safari

[shure77]

Describe the bug Unable to enter a valid date on Safari browser. Last two of four digits in year can not be entered.

To Reproduce Go to https://imask.js.org/. Try to enter a valid date format in the date input.

Expected behavior It should be possible to enter a valid date, e.g. dd.mm.yyyy

Environment:

• OS: iOS 12.5.5 (also on latest iOS version)
• Browser: Safari
• IMask version: 6.1.0

[uNmAnNeR]

@shure77 which date you are trying to input?

[clothoo]

I've tried Firefox and Chrome. I can't enter the last digit for year. I'm using "react-imask": "^6.2.2", My code for imask:

  mask: Date,
  pattern: 'd{/}`m{/}`Y',
  blocks: {
    d: {
      mask: IMask.MaskedRange,
      from: 1,
      to: 31,
      maxLength: 2,
    },
    m: {
      mask: IMask.MaskedRange,
      from: 1,
      to: 12,
      maxLength: 2,
    },
    Y: {
      mask: IMask.MaskedRange,
      from: 1900,
      to: 9999,
    },
  },
  lazy: false,

[shure77]

@uNmAnNeR I just saw that I did not enter a date within the range, sorry for that.

Nevertheless there seems to be an issue with Safari when passing on data via dataset property. This implementation works for Chrome, not for Safari tough. This results to the issue, that only two of four digits in year can be entered. Only with Safari. Thank you:

<div class="mdc-textfield mdc-textfield--box mdc-textfield--masked" data-min="1981-11-20" data-max="2001-12-31">
  <input type="text" id="my-masked-field" class="mdc-textfield__input">
  <label class="mdc-textfield__label" for="my-masked-field">Date</label>
</div>

export class MaskedTextfield extends Textfield {
  connectedCallback() {
    super.connectedCallback();

    const input = this.querySelector(".mdc-textfield__input");
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth() + 1;
    const day = today.getDate();
    const date = year + "-" + month + "-" + day;
    const minDate = this.dataset.min || date;
    const maxDate = this.dataset.max || date;
    const options = {
      mask: Date,
      min: new Date(minDate),
      max: new Date(maxDate),
      lazy: true,
      placeholderChar: "_",
    };

    const dateMask = IMask(input, options);
}

[ghost]

@clothoo This is possibly a duplicate of #306

[gergelyvizvari]

I have the same issue. just change the pattern to anything instead of dot and it will not work. Last character not type-able.

const maskProps = {
        mask: Date,
        lazy: false,
        overwrite: true,
        autofix: true,
        pattern: 'd{/}`m{/}`Y'
};

[gergelyvizvari]

solution:

const maskProps = {
        mask: 'd/m/Y',
        lazy: false,
        overwrite: true,
        autofix: true,
        blocks: {
            d: { mask: MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2 },
            m: { mask: MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2 },
            Y: { mask: MaskedRange, placeholderChar: 'Y', from: 1900, to: 2999, maxLength: 4 },
        },
}