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>
);
}
You need to use `:
mask: "from` - to",
pattern: "d`.m`.0000` - d`.m`.0000",