2017-09-18 15 views
0

我使用DatePicker模块来完成任务管理器反应应用程序。除第一次更改日期外,它集成得很好,它总是返回一个对象而不是预期的日期。然而,如果我之后选择另一个日期,它会奇迹般地返回正确的输出。这里是我的代码为我的终极版形式的那部分:Redux形式DatePicker为第一个选定的值返回Moment对象而不是日期

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import moment from 'moment'; 
import DatePicker from 'react-datepicker'; 

import 'react-datepicker/dist/react-datepicker.css'; 

class TaskForm extends Component { 

    constructor (props) { 
    super(props) 
    } 


    render() { 

    const { handleSubmit } = this.props; 

    const renderDatePicker = ({input}) => (
     <div> 
      <DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value, 'MM/DD/YYYY') : null} /> 
     </div> 
    ); 


    return (
     <div> 
     <form onSubmit={ handleSubmit}> 
      <div> 
      {/* Date selection */} 
      <label>Date:</label> 
      <Field name="date" component={renderDatePicker} /> 
      </div>  
      <button type="submit">Save</button> 
     </form> 
     </div> 
    ) 
    }; 
}; 

export default reduxForm({form: 'taskForm'})(TaskForm); 

这里是我console.logged出来的值:

enter image description here

感谢提前的帮助!

回答

1

力矩值是一个对象总是得到你想要的确切格式,只需使用.format,如:

moment(date).format('MM/DD/YYYY') 
+0

谢谢你,你的答案是有帮助的,但我不得不调整它一点点。由于接受了moment()对象而不是字符串,所以我必须在返回值处添加一个条件来检查返回的值是否为对象,如果是,格式,如果不是,则保留原样。 –

+0

很高兴帮助。 :) –

相关问题