reactjsmaskimaskjsreact-imask

How to prevent last character from changing based on date in imask library?


I want to make a mask for a date range. But when I delete the last character in the start date, it is replaced by a digit from the end date.

Is it possible to make it so that when a latest character is deleted, the value from placeholderChar is replaced?

https://codesandbox.io/p/sandbox/hungry-resonance-dyqrmx

import { IMask, useIMask } from "react-imask";

export default function App() {
  const { ref } = useIMask<HTMLInputElement>(
    {
      mask: "from - to",
      pattern: "d`.m`.0000 - d`.m`.0000",
      blocks: {
        from: {
          mask: Date,
          blocks: {
            d: {
              mask: IMask.MaskedRange,
              placeholderChar: "д",
              from: 1,
              to: 31,
              maxLength: 2,
            },
            m: {
              mask: IMask.MaskedRange,
              placeholderChar: "м",
              from: 1,
              to: 12,
              maxLength: 2,
            },
            Y: {
              mask: IMask.MaskedRange,
              placeholderChar: "г",
              from: 1900,
              to: 2999,
              maxLength: 4,
            },
          },
        },
        to: {
          mask: Date,
          blocks: {
            d: {
              mask: IMask.MaskedRange,
              placeholderChar: "д",
              from: 1,
              to: 31,
              maxLength: 2,
            },
            m: {
              mask: IMask.MaskedRange,
              placeholderChar: "м",
              from: 1,
              to: 12,
              maxLength: 2,
            },
            Y: {
              mask: IMask.MaskedRange,
              placeholderChar: "г",
              from: 1900,
              to: 2999,
              maxLength: 4,
            },
          },
        },
      },
      lazy: true,
      placeholderChar: " ",
    }
  );
  return (
    <div className="App">
      <input ref={ref} style={{ width: 180 }} />
    </div>
  );
}


Solution

  • You need to use `:

    mask: "from` - to",
    pattern: "d`.m`.0000` - d`.m`.0000",