为什么react-datepicker不能滚动月份？

Question

我的

react-datepicker

由于某种原因无法滚动月份。否则工作得很好，可以选择任何日期，它只是月份名称附近的箭头键（在屏幕截图上突出显示）不执行任何操作。如果我删除

readonly

属性，我还可以以预定格式输入任何日期，但日历仍然不可滚动？

日期选择器防御：

    <Grid item xs={6}>
        <Controller
            name={"periodFrom-" + input.index}
            control={input.form}
            render={({field: {onChange, value}, fieldState: {error}}) => (
                <div style={{marginTop: "10px"}}>
                    <InputLabel>start date </InputLabel>
                    <DatePicker dateFormat="dd/MM/yyyy"
                                customInput={<TextField variant="outlined" fullWidth
                                                        error={!!error}
                                                        inputProps={{readOnly: true}}
                                                        helperText={error ? error.message : null}/>}
                                selected={value} onChange={onChange}/>
                </div>
            )}
        />
    </Grid>

React 版本是最新的（“^18.3.1”）

日期选择器版本是“^4.10.0”（不确定应该是什么）

Answer 1

删除只读属性：如果您希望月/年箭头起作用（即滚动到上个月/下个月），您应该删除只读属性。问题似乎是日历导航可能尝试使用输入作为日历的交互部分，而只读会阻止它这样做。

<Grid item xs={6}>
    <Controller
        name={"periodFrom-" + input.index}
        control={input.form}
        render={({field: {onChange, value}, fieldState: {error}}) => (
            <div style={{marginTop: "10px"}}>
                <InputLabel>start date</InputLabel>
                <DatePicker
                    dateFormat="dd/MM/yyyy"
                    customInput={
                        <TextField
                            variant="outlined"
                            fullWidth
                            error={!!error}
                            inputProps={{}} // Remove readonly here
                            helperText={error ? error.message : null}
                        />
                    }
                    selected={value}
                    onChange={onChange}
                />
            </div>
        )}
    />
</Grid>