React-Redux-Form - 整合日期选取器

Question

我是redux表格的新手，很抱歉如果我使用了错误的术语。

我一直在使用react-redux-form来处理我的redux和后端通信。 https://github.com/davidkpiano/react-redux-form

最近我被要求实施日期选择器。我们最初的选择是使用Airbnb日期选择器，但是我们无法将捕获的值发送到后端。

也许是更容易显示我的代码：上渲染（）的返回

-

<Form model="trip" onSubmit={(val) => this.handleSubmit(val)}> 
    <Control.select model=".city"> 
     {getCities} 
    </Control.select> 

    <Control 
     model=".travelDate" 
     component={SingleDatePicker} 
     mapProps={{ 
      onDateChange: props => props.onChange, 
      onFocusChange: props => props.onChange, 
      date: props => props.modelValue 
     }} 
    /> 
    <div> 
     <Button name="Lets Begin!" buttonType="primary" /> 
    </div> 
</Form> 

嗯，我已经做了一些搜索，并对其作出反应，日期选择器通过的Airbnb有有点反应 - 还原形式的问题。如果有人知道任何更好的插件值得使用。请让我知道

感谢您的帮助，

Answer 1

• 反应，日期时间https://github.com/YouCanBookMe/react-datetime implementaion是如下： -

form.js

<div className="md-grid"><p className="md-cell--3 subheading">Valid until</p> 
 
     <div> 
 
      <Control 
 
       model='.valid_until' 
 
       component={DateField} 
 
       mapProps={{ 
 
        value: (props) =>{return props.viewValue} 
 
       }} 
 
       /> 
 
     </div> 
 
    </div>

Datefield.js

import React, {PureComponent, PropTypes} from "react"; 
 
import Datetime from 'react-datetime/DateTime'; 
 
require('react-datetime'); 
 

 

 
const DateComponent = (props)=> { 
 

 
    return (
 
     <Datetime defaultValue={new Date()} 
 
     value={props.value} 
 
     {...props} 
 
     style={{width:'150%'}}/> 
 
    ); 
 

 
}; 
 

 
export default DateComponent

• 其次，你可以使用反应-MD的DatePicker https://react-md.mlaursen.com/components/pickers/date