react DatePicker日期使用组件

=                                                       react 使用antd中的时间组件


1.首先导入

import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

2.在render下面的return中放入

<RangePicker showTime={{format:'HH:mm'}}

format="YYYY-MM-DD "

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

<Button onClick={this.Timer}></Button>

然后使用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)

         })

    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。