how to mask input fields onKeyUp using react material ui? - reactjs

Question

I have created login form where it has DOB and PHONE fields. Where the user has to type it. While typing it should mask the values as DOB format (YYYY-MM-DD) and phone format as [phone]. I have used material ui for TextFied and react-hook-form for form validation. I can achieve some part by giving regex on KeyUp. But it accepts the letter in Number field. Here i added the example in
CodeSandbox : https://codesandbox.io/s/react-material-ui-login-tdcoh
And also i am shring the code here. please help me with this.
Thanks in advance
import React from "react";
import {Paper,withStyles,Grid,TextField,Button,FormControlLabel,Checkbox } from "#material-ui/core";
import { Face, Fingerprint } from "#material-ui/icons";
import { useForm } from "react-hook-form";
const styles = theme => ({
margin: {
margin: theme.spacing.unit * 2
},
padding: {
padding: theme.spacing.unit
}
});
const LoginTab = () => {
const { handleSubmit, register, errors, reset } = useForm({
mode: "onChange"
});
const onSubmit = values => {
alert(JSON.stringify(values));
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={8} alignItems="flex-end">
<Grid item>
<Face />
</Grid>
<Grid item md={true} sm={true} xs={true}>
<TextField
id="dob"
label="DOB"
name="dob"
onKeyUp={e => {
var v = e.target.value;
if (v.match(/^\d{4}$/) !== null) {
e.target.value = v + "/";
} else if (v.match(/^\d{4}\/\d{2}$/) !== null) {
e.target.value = v + "/";
}
}}
inputRef={register({
required: "FIELD_REQUIRED_MESSAGE",
pattern: {
value: /(\d{2})-(\d{2})-(\d{4})/,
message: "Please enter a correct DOB pattern."
}
})}
/>
{errors.dob && <p>{errors.dob.message}</p>}
</Grid>
</Grid>
<Grid container spacing={8} alignItems="flex-end">
<Grid item md={true} sm={true} xs={true}>
<TextField
id="username"
label="PHONE"
name="phone"
onKeyUp={e => {
let x = e.target.value
.replace(/\D/g, "")
.match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[2]
? x[1]
: "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
}}
inputRef={register({
required: "FIELD_REQUIRED_MESSAGE",
pattern: {
value: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
message: "PHONE_VALIDATION_PATTERN_MESSAGE"
}
})}
/>
{errors.phone && <p>{errors.phone.message}</p>}
</Grid>
</Grid>
<Grid container alignItems="center" justify="space-between">
<Grid item>
<FormControlLabel
control={<Checkbox color="primary" />}
label="Remember me"
/>
</Grid>
<Grid item>
<Button
disableFocusRipple
disableRipple
style={{ textTransform: "none" }}
variant="text"
color="primary"
>
Forgot password ?
</Button>
</Grid>
</Grid>
<Grid container justify="center" style={{ marginTop: "10px" }}>
<Button
variant="outlined"
color="primary"
type="submit"
style={{ textTransform: "none" }}
>
Login
</Button>
</Grid>
</form>
);
};
export default withStyles(styles)(LoginTab);