Вы можете использовать выбранное значение, чтобы установить новое значение в вашем указателе даты
//use moment to add moths as per your selection
npm install moment --save
// 1. add date in your parent state like
const state = {
date : 'your initial date' // like moment().format('yyyy/MM/dd HH:mm');
}
//2. add function like
setNewDate = (date) => {
this.setState{{ date : date }}
}
// 3. onTodoChange function wich accept value and add moth as per value and set new date to state
onTodoChange(value){
const newDate = moment().format('yyyy/MM/dd HH:mm').add(value, 'months').calendar();
setNewDate(newDate);
}
// 4. now you can pass it to child component like
< Child date={this.state.date} setNewDate={this.setNewDate} />
Теперь ваш указатель даты будет устанавливать значение, так как вы обновили, используя ваш выбор
и в вашем
const handleDateChange = (date,value) => {
setNewDate(date); // set new date
};
Вы можете видеть, когда вы выбираете любое значение из select, затем вызывается onTodoChange, который устанавливает новую дату в состояние, поэтому состояние обновляется, и мы используем эту дату в нашем дочернем элементе, поэтому наша дочерняя дата также обновляется
Дочерний компонент:
const { date , setNewDate } = props;
const handleDateChange = (date,value) => {
console.log('date',date);
console.log('value',value);
setNewDate(date) // if you are getting your date in date / change it to value : this will update your date as you are changing your date in picker
};
};
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<ThemeProvider theme={getMuiTheme}>
<KeyboardDateTimePicker
value={date} // we are directly using date here
onChange={handleDateChange} // will change our date in parent component and we are getting new date here
// onBlur={handleDataBlur}
// label="Tanggal"
placeholder="Masukkan Tanggal (Tahun/Bulan/Tanggal)"
// variant="inline"
inputVariant="outlined"
fullWidth
// onError={console.log}
format="yyyy/MM/dd HH:mm"yyyy
disablePast
/>
</ThemeProvider>
</Grid>
</MuiPickersUtilsProvider>