DatePicker日付をカスタム形式で入力する

Question

私は自分の州で日付をredux形式で伝えたいと思っています。私は反応日ピッカーを使用します。

import React, { PropTypes } from 'react'; 
import DatePicker from 'react-datepicker'; 
import moment from 'moment'; 
import 'react-datepicker/dist/react-datepicker.css'; 

    const MyDatePicker = ({ input, meta: { touched, error } }) => (
     <div> 
     <DatePicker 
      {...input} dateFormat="YYYY-MM-DD" 
      selected={input.value ? moment(input.value) : null} 
     /> 
     { 
      touched && error && 
      <span className="error"> 
      {error} 
      </span> 
     } 
     </div> 
    ); 

    MyDatePicker.propTypes = { 
     input: PropTypes.shape().isRequired, 
     meta: PropTypes.shape().isRequired 
    }; 

    export default MyDatePicker; 

問題は、私は日付を選択したとき、私はそれがDD-MM-YYYYとして表示したいということですが、私は日付が私の状態で保存したい：私のReduxの形式とDatePickerの互換性を持たせるために私が書きますYYYY-MM-DD HH：MM：SS形式を使用します。これを行う方法？私は瞬間のフォーマット機能を使用しますが、動作していないようです。

Answer 1

the value lifecycle methodsredux-formはこれを提供する必要があります。

parseを使用して、react-datepickerから値をフォーマットし、formatから値を解析してreact-datepickerの値を解析して提示します。例：

function formatDateForInput(storedDate) { 
    // the returned value will be available as `input.value` 
    return moment(pickedDate).format('right format for your input') 
} 

function parseDateForStore(pickedDate) { 
    // the returned value will be stored in the redux store 
    return moment(storedDate).format('desired format for storage') 
} 

<Field 
    component={ MyDatePicker } 
    format={ formatDateForInput } 
    parse={ parseDateForStore } 
/> 

これはあなたのために動作しない場合は、redux-formによって提供さDatePickerとinput小道具の間でカスタムonChangeハンドラを配置する必要がある場合、私はチェックをお勧めします。値DatePickerがonChangeを呼び出すために使用している可能性がありますので、redux-formは理解できません。このように：

const MyDatePicker = ({ input, meta: { touched, error } }) => { 

    const onChange = event => { 
    const pickedDate = event.path.to.value; 
    input.onChange(pickedDate); 
    } 

    return (
    <div> 
     <DatePicker 
     dateFormat="YYYY-MM-DD" 
     selected={input.value ? moment(input.value) : null} 
     onChange={ onChange } 
     /> 
     { 
     touched && error && 
     <span className="error"> 
      {error} 
     </span> 
     } 
    </div> 
); 
} 

MyDatePicker.propTypes = { 
    input: PropTypes.shape().isRequired, 
    meta: PropTypes.shape().isRequired 
}; 

export default MyDatePicker; 

Answer 2

私が正しいと理解しているのであれば、UIの同じ日付と保存する他の2つの異なるフォーマットが必要ですか？ moment(date).format('DD-MM-YYYY')とmoment(date).format('YYYY-MM-DD HH:MM:SS')は両方の日付の日付を指定します。