2017-09-18 49 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

很高興幫助。 :) –

相關問題