Question

我想使用redux-form在我的州里设置日期。我使用react-datepicker。为了使datepicker与我的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格式保存在我的州。这该怎么做？我使用时刻的格式功能，但它似乎不起作用

Answer 1

您应该使用#ifdef _WINDOWS #include <windows.h> #include <GL/gl.h> #include <GL/glu.h> #include <GL/glut.h> // <-- added by me #else #include <GL/gl.h> #include <GL/glut.h> #endif //_WINDOWS提供的the value lifecycle methods。

使用redux-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 } />提供的onChange和DatePicker道具之间添加自定义input处理程序。因为redux-form用于调用DatePicker的值可能是onChange无法理解的值。像这样：

redux-form

希望这有帮助！

Answer 2

如果我理解正确你只需要2个不同的格式在UI和其他相同的日期一个保存？ moment(date).format('DD-MM-YYYY')和moment(date).format('YYYY-MM-DD HH:MM:SS')将为您提供两种格式日期。

Answer 3

只需使用prop dateFormat =“ dd / MM / yyyy”

示例：

<DatePicker 
    selected={startDate} 
    onChange={date => handleChange(date)} 
    dateFormat="DD/MM/YYYY"
/>

使用自定义格式输入DatePicker日期

3 个答案: