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