使用自定义格式的DatePicker日期输入 [英] DatePicker date input with custom format

问题描述

我想使用redux-form在我的状态下添加日期.我用react-datepicker为了使datepicker与我的redux格式兼容，我写:

I want to stote dates in my state using redux-form. I use react-datepicker. To make the datepicker compatible with my redux-form i write:

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格式保存在我的状态中.这该怎么做?我使用了当下的格式化功能，但似乎没有用

The problem is that when i choose date i want it to show as DD-MM-YYYY but i want the date to be saved in my state with the YYYY-MM-DD HH:MM:SS format. How to do this? I use the moment's format function but it did not seem to work

推荐答案

您应使用

You should use the value lifecycle methods that redux-form provides for this.

使用parse格式化来自react-datepicker的值进行存储，并使用format解析来自存储的值以供react-datepicker呈现.示例:

Use parse to format the value coming from react-datepicker for storage and format to parse the value from the store back for react-datepicker to present it. Example:

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无法理解的值.像这样:

If this does not work for your, I would recommend checking if you need to put a custom onChange handler between the DatePicker and input prop provided by redux-form. Because it could be that the values DatePicker is using to call onChange are ones that redux-form does not understand. Like this:

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;

希望这会有所帮助！

这篇关于使用自定义格式的DatePicker日期输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！