Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 1x 2x 2x 1x 2x 1x 2x | import React from "react";
import { RHFInput } from "@common/Input";
import { useFormContext } from "react-hook-form";
const ExpirationInput = () => {
const { setValue, watch } = useFormContext();
const normalizeInput = (value: string) => {
Eif (!value) return value;
const currentValue = value.replace(/[^\d]/g, "");
const cvLength = currentValue.length;
if (cvLength < 3) return currentValue;
if (cvLength < 6)
return `${
parseInt(currentValue.slice(0, 2)) > 12 ? 12 : currentValue.slice(0, 2)
} / ${currentValue.slice(2, 5)}`;
};
React.useEffect(() => {
setValue("expiration", normalizeInput(watch("expiration")));
}, [watch("expiration")]);
return (
<RHFInput
name="expiration"
label="Expiration"
fullWidth
inputProps={{
maxLength: "7",
}}
placeholder="MM / YY"
sx={{
letterSpacing: "6px",
"& .MuiFormHelperText-root": {
letterSpacing: "0px",
},
}}
/>
);
};
export default ExpirationInput;
|