imaskjs: Bug with a custom pattern on Date mask

@TonyE73 Check it works https://jsfiddle.net/o9gaydq8/

@uNmAnNeR this solution is a hack and does not work like the other behaviour - please reopen and say this is a temporary workaround

The problem still exists. I have the same problem with the date pattern right now.

Just got the same issue in react-native-imask but with pattern mm/dd/yyyy. Managed to fix it via date-fns:

import { IMaskTextInput } from 'react-native-imask';
import { format, parse } from 'date-fns';

const DateInput = () => {
  return (
    <IMaskTextInput
      mask={Date}
      pattern="m{/}`d{/}`Y"
      format={(date: Date): string => format(date, 'MM/dd/yyyy')}
      parse={(value: string): Date => parse(value, 'MM/dd/yyyy', new Date())}
    />
  );
};

Hope it will help someone!

Why is this issue closed if the problem is not fixed?

I solved it by changing the imask-6.4.3.js file, starting from line 2766 to 2784.

New code:

  MaskedDate.DEFAULTS = {
    pattern: 'd{/}`m{/}`Y',
    format: function format(date) {
      if (!date) return '';
      var day = String(date.getDate()).padStart(2, '0');
      var month = String(date.getMonth() + 1).padStart(2, '0');
      var year = date.getFullYear();
      return [day, month, year].join('/');
    },
    parse: function parse(str) {
      var _str$split = str.split('/'),
        _str$split2 = _slicedToArray(_str$split, 3),
        day = _str$split2[0],
        month = _str$split2[1],
        year = _str$split2[2];

      return new Date(year, month - 1, day);
    }
  };

@ezze good idea about types, will check

lets make it red ? 😃

I faced the similar issue and found this thread. If I got it right, the problem is that if I provide any custom pattern for date mask I also need to specify format and parse functions corresponding to it otherwise results will be unexpected like mentioned above.

@uNmAnNeR Maybe, docs should be a little bit more specific on this. Wouldn’t it better to add typings constraints disallowing to pass non-default pattern without format and parse functions and throw an error if it’s been passed?

Hi, I am having the same problem despite adding parse and format returns ‘2018-10-2’ in input. Always leaves the last digit off. Other than this I am very impressed with the program

mask: Date, parse: function (str) {var yearMonthDay = str.split(‘-’); return new Date(yearMonthDay[0], yearMonthDay[1] - 1, yearMonthDay[2]); }, pattern: “Y-m-d”, dateFormat:“Y-m-d”