javascript - How to get the value of the Rangepicker which having the time with Ant Design? - Stack Overflow

admin管理员组

文章数量:1305772

I have a table of Rangepicker of the date and the time, this table is dynamically which I can add and remove these range picker as you look at the picture below :

I want to store these values on another table to send it to the backend and when I have value on the Rangepicker, I get an error.

My code is :

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}>
                            &nbsp; &nbsp; &nbsp;
                            <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>
                    )}
}

How can I fix it ?

I have a table of Rangepicker of the date and the time, this table is dynamically which I can add and remove these range picker as you look at the picture below :

I want to store these values on another table to send it to the backend and when I have value on the Rangepicker, I get an error.

My code is :

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}>
                            &nbsp; &nbsp; &nbsp;
                            <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>
                    )}
}

How can I fix it ?

• javascript
• reactjs
• datetimepicker
• antd
• daterangepicker

Share Improve this question Follow asked Apr 19, 2019 at 13:59 Ichrak MansourIchrak Mansour 1,9421212 gold badges3737 silver badges6464 bronze badges 6

• Can you create a sandbox? Looks okay to me. You need to store it to your state in the onOk() and be sure to remove it if the x icon is pressed. – Shivam Gupta Commented Apr 19, 2019 at 14:33
• @ShivamGupta this is my codeSandbox : codesandbox.io/s/53nr9w4l9n – Ichrak Mansour Commented Apr 19, 2019 at 14:48
• Okay, so the state declaration causes it to always remain today's date and a month from today. – Shivam Gupta Commented Apr 19, 2019 at 14:55
• 1 codesandbox.io/s/719qvv8v11?fontsize=14 – Shivam Gupta Commented Apr 19, 2019 at 15:16
• 1 Here you go, you had to pass the context with the onChange() so that you can add the required date. FYI, be sure to check the remove functionality, it doesn't work as expected in above code. – Shivam Gupta Commented Apr 19, 2019 at 15:17

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

Change

onChange(value, dateString) {
 console.log('Selected Time: ', value);
 console.log('Formatted Selected Time: ', dateString)
}

to

onChange = (value, dateString) => {
 let date = this.state.date
 date.push(value)
 this.setState({date: date})
}

Link here The x icon is not functional in the above link

 onChangeDate(value) {
    this.setState({date: value});
 };


onChange{this.onChangeDate.bind(this)}

本文标签： javascriptHow to get the value of the Rangepicker which having the time with Ant DesignStack Overflow