DatePicker 自定义格式的日期输入

我想使用 redux-form 将日期存储在我的状态中。我使用反应日期选择器。为了使日期选择器与我的 redux-form 兼容，我写道：

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，但我希望日期以 YYYY-MM-DD HH:MM:SS 格式保存在我的州中。这个怎么做？我使用了 moment 的格式化功能，但它似乎不起作用

你应该使用价值生命周期方法 http://redux-form.com/6.5.0/docs/ValueLifecycle.md/ that redux-form对此作出规定。

Use 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 }
/>

如果这对您不起作用，我建议您检查是否需要自定义onChange之间的处理程序DatePicker and input道具提供者redux-form。因为这可能是价值观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;

希望这可以帮助！