my react-datepicker cannot scroll months for some reason. Otherwise works perfectly fine, can select any date, its just arrow keys near month name (highligted on screenshot) don't do anything. If I remove the readonly attribute I also can type in any date in predetirmened format but still the calendar is unscrollable?

Datepicker defenition:

    <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 version is latest ("^18.3.1")

Datepicker version is "^4.10.0" (not sure what it should be)

my react-datepicker cannot scroll months for some reason. Otherwise works perfectly fine, can select any date, its just arrow keys near month name (highligted on screenshot) don't do anything. If I remove the readonly attribute I also can type in any date in predetirmened format but still the calendar is unscrollable?

Datepicker defenition:

    <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 version is latest ("^18.3.1")

Datepicker version is "^4.10.0" (not sure what it should be)

• reactjs
• typescript
• dom

Share Improve this question Follow asked Nov 20, 2024 at 4:19 EcmaScriptIsMyNativeLanguageEcmaScriptIsMyNativeLanguage 1322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Remove the readonly Attribute: If you want the month/year arrows to work (i.e., scrolling to previous/next months), you should remove the readonly attribute. The issue seems to be that the calendar navigation might be trying to use the input as an interactive part of the calendar, and readonly prevents it from doing so.

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