I am currently using a datetimepicker component from material-ui/pickers in a class-based react-js component. I am facing an issue where the datetimepicker closes immediately every time I click on any part of it (date, year, etc.).
Here's a snippet of the code I have implemented:
import MomentUtils from '@date-io/moment';
import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
class ScheduleTest extends React.Component {
constructor(props) {
super(props);
this.state = {
form:{
scheduleStartDate: new Date(),
}
}
this.handleStartDateChange = this.handleStartDateChange.bind(this);
}
handleStartDateChange(e) {
const { form } = this.state;
form.scheduleStartDate = e;
this.setState({ form });
}
render(){
const { form } = this.state;
return(){
<MuiPickersUtilsProvider utils={MomentUtils}>
<ThemeProvider theme={defaultMaterialTheme}>
<DateTimePicker value={form.scheduleStartDate} format={moment(form.scheduleStartDate).format('DD-MM-YYYY')} onChange={this.handleStartDateChange} />
</ThemeProvider>
</MuiPickersUtilsProvider>
}
}
}
Does anyone have any insights on what might be causing this issue? Thank you in advance.