2017-11-14 1 views
1

저는 material-ui date-picker 필드로 redux-form을 구현하고 있습니다. 날짜가 완벽하게 필드에 설정하지만 날짜의 백엔드 API 형식으로 보내려고 할 때입니다 :React material-ui date-picker에서 날짜 형식을 지정하는 방법은 무엇입니까?

BeginDate_1: Tue Nov 14 2017 15:03:43 GMT+0530 (IST)

나는이 형식 변경하기 위해 노력하고있어 'YYYY-mm를-DD' 형식을 사용하여 백엔드 API로 전송하십시오.

서식을 지정하기 위해 momentjs을 시도했지만 원하는 결과를 얻을 수 없었습니다. 여기

내가 무엇을 시도했다입니다 :

Home.js

import React, {Component} from 'react'; 
import {Field, reduxForm} from 'redux-form'; 
import DatePicker from 'material-ui/DatePicker'; 
import {connect} from 'react-redux'; 
import * as moment from 'moment'; 

class Home extends Component { 

renderCalendarField= ({ 
          input, 
          label, 
          meta: {touched, error}, 
          children, 
          ...custom 
         }) => (
    <DatePicker 
     floatingLabelText={label} 
     errorText={touched && error} 
     {...input} 
     value = {input.value !== ''? new Date(input.value) : null} 
     onChange={(event, value) => input.onChange(value)} 
     children={children} 
     {...custom} 
     formatDate={(date) => moment(date).format('YYYY-MM-DD')} 

    /> 

) 

render() { 

    const startDate = new Date(); 

    const {handleSubmit} = this.props; 

    return (

     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 


      <div> 
       <Field name="BeginDate_1" component={this.renderCalendarField} label="DEPARTURE" minDate={startDate} /> 
      </div> 


      <div> 
       <button type="submit"> 
        Submit 
       </button> 
      </div> 

     </form> 

    ); 

} 

} 

const LogInForm = reduxForm({ 
form: 'MaterialUiForm', // a unique identifier for this form 
validate 
})(Home); 

export default connect(mapStateTOProps, {getCity})(LogInForm); 

는 콘솔 출력은 여전히 ​​: 나는 YYYY-mm-dd에서이 날짜를 포맷 할 수있는 방법

BeginDate_1:Tue Nov 14 2017 15:03:43 GMT+0530 (IST)

체재?

답변

2

formatDate 보조는 DatePicker에 사용되며 formatDisplay Date에 사용되며 실제 값은 아닙니다. 무엇 당신이 할 필요는 material-ui/DatePicker docs에 따르면 moment

onSubmit (values) { 

    const beginDate = moment(values.BeginDate_1).format('YYYY-MM-DD') 
    console.log(beginDate); 
    //other things 
} 

사용하여 onSubmit 함수의 값을 포맷 : 형식 오류 : __WEBPACK_IMPORTED_MODULE_12_moment __ (...)

formatDate: function

This function is called to format the date displayed in the input field, and should return a string. By default if no locale and DateTimeFormat is provided date objects are formatted to ISO 8601 YYYY-MM-DD.

Signature:

function(date: object) => any 
date: Date object to be formatted. 
returns (any): The formatted date. 
+0

이 오류가. formate는 기능이 아닙니다. – Dhaval

+0

그건 제 답변의 오타였습니다. 'format'이어야하고'formate'가 아니어야합니다. –

+0

현재 잘 작동합니다. 감사 – Dhaval

관련 문제