react DatePicker日期使用组件

=                                                       react 使用antd中的时间组件

1.首先导入

import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

2.在render下面的return中放入

format="YYYY-MM-DD "

onChange={onChange}onOk={onOk}/>

然后使用onChange时间转换日期格式(此格式是年-月-日的个格式)，如果你想要年-月-日加时和分的话，需要format="YYY-MM-DDHH:mm".

function onChange(value,dateString) { 

 console.log('Selected Time: ', value); 

 console.log('Formatted Selected Time: ', dateString);

 this.setState({

            task_time: dateString//task_time指的是你选中的日期参数，需要存在this.state中

        })

}

2.然后接收后台传过来的日期参数

 Timer = () => {

        console.log(sessionStorage.getItem('user'))

        console.log(this.state.task_time[0])

         fetch(`api/personal-center/conditionalQuery`, {

             // 请求的方式

             method: "POST",

             // 请求头

             headers: {

                 'Content-Type': 'application/json'

             },

             // 要传的参数

             body: JSON.stringify({

                 start_date: this.state.task_time[0],

                 end_date: this.state.task_time[1],

                 current_Size: 5,

                 current_Page: 1,

                 user_id: 2,

             })

         }).then((res) => {

             console.log(res)

             return res.json()

         }).then((res) => {

             this.setState({

                 listArr: res.data,

                 total: res.total

             })

         }).catch(function (err) {

             console.log(err)

         })

    }