react-antd-form-rangerPicker:同时使用timerPicker,datePicker,解构rangePicker(时间区间选择和日期区间选择不在一起的兼容使用)

antd内有两个关于时间区间选择的对象:TimerPicker,DatePicker.他们都有自己的RangePicker,

如果一个构建中有两个时间区间选择框(非在一个框内同时可选择日期和时间而是分开)

换句话说在一个组件内直接同时使用两个组件的同名RangePicker

个人的做法时在jsx内利用变量的环境作用域,这样就不用改名(解构出的rangePicker非自定义名字)

import {TimerPicker,DatePicker} from 'antd'
const { RangePicker } = DatePicker//日期选择
 {/* 选择日期 */}
                    <Form.Item label="日期" name="chosedate">
                        <RangePicker></RangePicker>
                    </Form.Item>
                    {/* 指定时间 */}
                    <Form.Item name="zhiTimer" label="指定时间">
                        {
                          (()=>{
                            const {RangePicker} = TimePicker
                            return  <RangePicker></RangePicker>
                          })()
                        }
                    </Form.Item>

 

posted @ 2020-08-31 16:24  少哨兵  阅读(1528)  评论(0编辑  收藏  举报