如何在MUI日期选择器中用（*）星号屏蔽输入的日期？

Question

在我的应用程序中，有一个用于捕获用户出生日期的选项。一旦用户输入日期或从日历中选择，我想将数字显示为星号。

套装版本：

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

示例：

如果用户输入 DOB

05/11/1990

(mm/dd/yyyy)，则需要显示如

**/**/1990

。

实际：

预计：

代码：

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>
);

Answer 1

我也有类似的需求。这个问题解决了吗