I recently started using material-ui in my React + TypeScript project.
The code below was written based on the sample code on the official website.
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import DatePicker from '@mui/lab/DatePicker';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import TextField from '@mui/material/TextField';
import React, { useState } from 'react';
const SampleDatePickerOriginal = () => {
const [date, setDate] = useState<Date>(new Date());
const onChangeHandler = (_date: Date | null, keyboardInputValue?: string) => {
if (_date) {
setDate(_date);
}
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
onChange={onChangeHandler}
value={date}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
};
export default SampleDatePickerOriginal;
I wanted to use input element instead of TextField in this code.
So I referred to material-ui’s issue (https://github.com/mui/material-ui-pickers/issues/1751) and wrote the code below.
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import DatePicker from '@mui/lab/DatePicker';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import React, { useState } from 'react';
const SampleDatePickerCustom = () => {
const [date, setDate] = useState<Date>(new Date());
const [isOpen, setIsOpen] = useState<boolean>(false);
const onChangeHandler = (_date: Date | null, keyboardInputValue?: string) => {
if(_date){
setDate(_date);
}
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
onChange={onChangeHandler}
onClose={() => {setIsOpen(false);}}
open={isOpen}
value={date}
renderInput={({
ref,
inputProps,
disabled,
onChange,
value,
...other
}) => (
<div ref={ref}>
<input
style={{ display: 'none' }}
value={date.toISOString()}
onChange={onChange}
disabled={disabled}
{...inputProps}
/>
<button onClick={() => {setIsOpen(!isOpen);}}>
OPEN
</button>
</div>)} />
</LocalizationProvider>
);
};
export default SampleDatePickerCustom;
This code works fine, but the calendar that opens is in the upper left corner.
How can I make it appear just below the button like when I use TextField?