MUI Datetimepicker 使用下拉菜单更改值 select
MUI Datetimepicker changing value by using dropdown select
我正在使用 React datetimepicker 并打算使用选择器来更改值。但是当我选择一个选项时它并没有改变(例如:我选择 6 个月,它会添加 6 个月的完成日期)。这是我的代码
子组件
const handleDateChange = (date,value) => {
setSelectedDate(date);
props.onChange(value); //setstate
if(props.setNewDate != undefined)
{
setSelectedDate(props.date);
props.setNewDate(date);
props.onChange(a)
}
};
};
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<ThemeProvider theme={getMuiTheme}>
<KeyboardDateTimePicker
value={selectedDate}
onChange={handleDateChange}
// 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>
父组件
state = {
selectedFile: null,
imagePreviewUrl: null,
err: null,
title : '',
highlight : '',
platform : '',
start_publish : '',
end_publish : '',
sender : '',
receiver : '',
action : '',
status : '',
bundle : '',
initial_date : new Date(),
};
setNewDate = (date) => {
this.setState({
initial_date : date
})
}
onTodoChange(value){
var start_publish = new Date(this.state.start_publish);
start_publish.setDate(start_publish.getDate()+(value*30));
// console.log(start_publish);
// start_publish.setDate(start_publish.getDate()+(value*30));
this.setNewDate(start_publish);
console.log(this.state.initial_date);
}
showBundle = (values) =>
{
this.setState({
bundle : JSON.stringify(values),
})
};
render()
{
let startPublish = new Date(this.state.start_publish);
let endPublish = new Date(this.state.end_publish);
let publish = ((endPublish - startPublish) / (60*60*24*1000));
let $publishInterval = ('');
if(publish >= 0)
{
$publishInterval = (<div class="form-group row mb-4">
<label class="col-sm-2 col-form-label">Jarak</label>
<div class="col-sm-4 text-left">
<span class="form-control text-left">{publish.toFixed(0)} hari</span>
</div>
<label class="col-sm-2 col-form-label">Range</label>
<div class="col-sm-4 text-left">
<select class="custom-select" onChange={e => this.onTodoChange(e.target.value)} id="platform"> ////// the selector
<option value="">Select</option>
<option value={1}>1 Month</option>
<option value={3}>3 Month</option>
<option value={6}>6 Month</option>
</select>
</div>
</div>)
}
return (
<Modal
{...this.props}
size="lg"
onExit={this.handleExit}
backdrop="static"
animation={true}
aria-labelledby="contained-modal-title-vcenter"
centered
>
<form onSubmit={this.handleSubmit} class="was-validated justify-content-center">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Tambah Notifikasi
</Modal.Title>
</Modal.Header>
<Modal.Body style={{'max-height': 'calc(100vh - 210px)', 'overflow-y': 'auto'}}>
<div class="form-group row mb-4">
<label class="col-sm-2 col-form-label">Publish Date</label>
<div class="col-sm-10">
<MaterialUIPickers required onChange={ (start_publish) => {this.setState( { start_publish })}}></MaterialUIPickers>
</div>
</div>
<div class="form-group row mb-4">
<label class="col-sm-2 col-form-label">Finish Date</label>
<div class="col-sm-10">
<MaterialUIPickers required duration={this.state.duration} onChange={ (end_publish) => {this.setState( { end_publish })}}></MaterialUIPickers>
</div>
</div>
{$publishInterval}
<div class="form-group row mb-4">
<label class="col-sm-2 col-form-label">Bundle</label>
<div class="col-sm-10">
<Provider store={store}>
<FieldArraysForm onChange={this.showBundle}/>
</Provider>
</div>
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="danger" onClick={this.handleExit}>Close</Button>
<Button variant="success" type="submit">Post</Button>
</Modal.Footer>
</form>
</Modal>
)
}
如何在选择选择器时触发日期选择器的onchange函数?
您可以使用 selected 值在日期选择器中设置新值
//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} />
现在您的日期选择器将设置您使用 selection
更新的值
在你的
const handleDateChange = (date,value) => {
setNewDate(date); // set new date
};
您可以看到,当您 select 从 select 获取任何值时,会调用 onTodoChange 来设置新的状态日期,状态已更新,我们在 child 所以我们的 child 日期也更新了
Child 分量:
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>
我正在使用 React datetimepicker 并打算使用选择器来更改值。但是当我选择一个选项时它并没有改变(例如:我选择 6 个月,它会添加 6 个月的完成日期)。这是我的代码
子组件
const handleDateChange = (date,value) => {
setSelectedDate(date);
props.onChange(value); //setstate
if(props.setNewDate != undefined)
{
setSelectedDate(props.date);
props.setNewDate(date);
props.onChange(a)
}
};
};
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<ThemeProvider theme={getMuiTheme}>
<KeyboardDateTimePicker
value={selectedDate}
onChange={handleDateChange}
// 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>
父组件
state = {
selectedFile: null,
imagePreviewUrl: null,
err: null,
title : '',
highlight : '',
platform : '',
start_publish : '',
end_publish : '',
sender : '',
receiver : '',
action : '',
status : '',
bundle : '',
initial_date : new Date(),
};
setNewDate = (date) => {
this.setState({
initial_date : date
})
}
onTodoChange(value){
var start_publish = new Date(this.state.start_publish);
start_publish.setDate(start_publish.getDate()+(value*30));
// console.log(start_publish);
// start_publish.setDate(start_publish.getDate()+(value*30));
this.setNewDate(start_publish);
console.log(this.state.initial_date);
}
showBundle = (values) =>
{
this.setState({
bundle : JSON.stringify(values),
})
};
render()
{
let startPublish = new Date(this.state.start_publish);
let endPublish = new Date(this.state.end_publish);
let publish = ((endPublish - startPublish) / (60*60*24*1000));
let $publishInterval = ('');
if(publish >= 0)
{
$publishInterval = (<div class="form-group row mb-4">
<label class="col-sm-2 col-form-label">Jarak</label>
<div class="col-sm-4 text-left">
<span class="form-control text-left">{publish.toFixed(0)} hari</span>
</div>
<label class="col-sm-2 col-form-label">Range</label>
<div class="col-sm-4 text-left">
<select class="custom-select" onChange={e => this.onTodoChange(e.target.value)} id="platform"> ////// the selector
<option value="">Select</option>
<option value={1}>1 Month</option>
<option value={3}>3 Month</option>
<option value={6}>6 Month</option>
</select>
</div>
</div>)
}
return (
<Modal
{...this.props}
size="lg"
onExit={this.handleExit}
backdrop="static"
animation={true}
aria-labelledby="contained-modal-title-vcenter"
centered
>
<form onSubmit={this.handleSubmit} class="was-validated justify-content-center">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Tambah Notifikasi
</Modal.Title>
</Modal.Header>
<Modal.Body style={{'max-height': 'calc(100vh - 210px)', 'overflow-y': 'auto'}}>
<div class="form-group row mb-4">
<label class="col-sm-2 col-form-label">Publish Date</label>
<div class="col-sm-10">
<MaterialUIPickers required onChange={ (start_publish) => {this.setState( { start_publish })}}></MaterialUIPickers>
</div>
</div>
<div class="form-group row mb-4">
<label class="col-sm-2 col-form-label">Finish Date</label>
<div class="col-sm-10">
<MaterialUIPickers required duration={this.state.duration} onChange={ (end_publish) => {this.setState( { end_publish })}}></MaterialUIPickers>
</div>
</div>
{$publishInterval}
<div class="form-group row mb-4">
<label class="col-sm-2 col-form-label">Bundle</label>
<div class="col-sm-10">
<Provider store={store}>
<FieldArraysForm onChange={this.showBundle}/>
</Provider>
</div>
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="danger" onClick={this.handleExit}>Close</Button>
<Button variant="success" type="submit">Post</Button>
</Modal.Footer>
</form>
</Modal>
)
}
如何在选择选择器时触发日期选择器的onchange函数?
您可以使用 selected 值在日期选择器中设置新值
//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} />
现在您的日期选择器将设置您使用 selection
更新的值在你的
const handleDateChange = (date,value) => {
setNewDate(date); // set new date
};
您可以看到,当您 select 从 select 获取任何值时,会调用 onTodoChange 来设置新的状态日期,状态已更新,我们在 child 所以我们的 child 日期也更新了
Child 分量:
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>