In my application, there is an option for capturing date of birth of user. Once user entered date or selected from calendar, I want to show number as asterisk.

Package version:

"@mui/material": "^5.6.2",
"@mui/lab": "^5.0.0-alpha.71",
"date-fns": "^2.24.0",
"react": "^18.0.0",

Example:

If user enter DOB 05/11/1990 (mm/dd/yyyy), then need to show like **/**/1990.

Actual:

Expected:

Code:

return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Grid container justifyContent="space-around">
            <DatePicker
                margin="normal"
                id="date-picker-dialog"
                label={label}
                inputFormat={format ?? 'MM/dd/yyyy'}
                mask={mask ?? "__/__/____"}
                onChange={handleDateChange}
                value={selectedDate}
                InputAdornmentProps={{ position: 'start' }}
                minDate={minDate}
                maxDate={new Date(maxdate)}
                shouldDisableDate={disableCustomDate}
                disablePast={disablePastDate === "true" ? true : false}
                views={views ?? [ 'year', 'month', 'day' ]}
                InputProps={{ "data-testid": "datePicker" }}
                renderInput={(props) => (
                    <TextField
                        {...props}
                        {...otherProps}
                        fullWidth={true}
                        placeholder={placeholder}
                        error={error ? error : errorTF}
                        helperText={error ? helperText : helperTextTF}
                        type="password"
                        variant="standard" />
                )}
            />
        </Grid>
    </LocalizationProvider>
);