我有一个日期和时间的Rangepicker表,该表是动态的,当您查看下面的图片时,我可以添加和删除这些范围选择器:
我想将这些值存储在另一个表上以将其发送到后端,并且当我在Rangepicker上具有值时,出现错误。
我的代码是:
import { DatePicker } from 'antd';
import moment from 'moment-timezone';
import fr_FR from 'antd/lib/locale-provider/fr_FR';
import "moment/locale/fr";
const { RangePicker } = DatePicker;
export default class App extends Component {
constructor(props) {
super(props);
this.state= {
tranches :[{date:null}]
}
onChange(value, dateString) {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString)
}
onOk(value) {
console.log('onOk: ', value);
}
render() {
return (
<div>
{
this.state.tranches.map((el, i) =>
<Row key={i}>
<Col span={12}>
<label className="pt-label .modifier"><strong>Période</strong></label>
<LocaleProvider locale={fr_FR}>
<RangePicker
allowClear={false}
id="date" name= "date"
style={{ width: '547px', marginLeft:'20px'}}
locale="fr"
//placeholder={["Date de début","Date de fin"]}
separator="-"
onChange={this.onChange}
showTime={{ format: 'HH:mm' }}
format="DD/MM/YYYY HH:mm"
placeholder={['Date et heure de début', 'Date et heure de fin']}
onOk={this.onOk}
/>
</LocaleProvider>
</Col>
<Col span={12}>
{i === 0 ?
<>
<Icon type="plus-circle" theme="twoTone" twoToneColor="#52c41a" onClick={this.ajouterTranche}/>
<br/>
</>
:
<>
<Icon type="close-circle" theme="twoTone" twoToneColor="red" onClick={this.supprimerTranche(i)}/>
<Icon type="plus-circle" theme="twoTone" twoToneColor="#52c41a" onClick={this.ajouterTranche}/>
<br/>
</>
}
</Col>
</Row>
)}
}
我该如何解决?
最佳答案
更改
onChange(value, dateString) {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString)
}
至
onChange = (value, dateString) => {
let date = this.state.date
date.push(value)
this.setState({date: date})
}
链接here
上面的链接中的x图标不起作用