How to use IMask to create a mask with optional negative hours

488 Views Asked by At

I have a hour mask on my app, which I created using the IMask library (https://imask.js.org/guide.html), and it works very well on my input. This is my mask options:

var maskOptions = {
    overwrite: true,
    autofix: true,
    mask: 'HH:MM',
    blocks: {
      HH: {
        mask: IMask.MaskedRange,
        placeholderChar: 'HH',
        from: 0,
        to: 23,
        maxLength: 2
      },
      MM: {
        mask: IMask.MaskedRange,
        placeholderChar: 'MM',
        from: 0,
        to: 59,
        maxLength: 2
      }
    }
  };

But I want to allow the user to insert negative hours if he want; to do this, I want to allow the user to type the "-" character before the string.

I tried this:

var maskOptions = {
    overwrite: true,
    autofix: true,
    mask: "[S]HH:MM",
    blocks: {
      S: {
        mask: IMask.MaskedEnum,
        enum: ['-'],
        maxLength: 1,
        minLength: 0
      },
      HH: {
        mask: IMask.MaskedRange,
        placeholderChar: 'HH',
        from: 0,
        to: 23,
        maxLength: 2
      },
      MM: {
        mask: IMask.MaskedRange,
        placeholderChar: 'MM',
        from: 0,
        to: 59,
        maxLength: 2
      }
    }
  };

But with this options, the string always need to have the "-" character in the beginning, I want this character to be optional. How can I do this? I thought the "[S]" on the mask property will turn the value optional, but don't seem to work this way. I also didn't found any info on the DOCS explaining more ways to add optional characters on the mask.

0

There are 0 best solutions below