2017-12-20 22 views
0

こんにちは私は、反応日からの2つの日付の差をmomentjsと表示したいと思います。日付は表示されていますが、const DiffはNaNを示します。私は[...年、月、日]あなたは、配列から瞬間オブジェクトを構築するためのmoment docsを見ればmomentjs https://momentjs.com/docs/#/displaying/difference/react-dates dateとmomentjsとの相違

import React, { Component } from 'react'; 
import {Col,Grid, Image,Row, Form, ControlLabel, Button} from 'react-bootstrap' 
import momentPropTypes from 'react-moment-proptypes'; 
import moment from 'moment'; 
import 'react-dates/initialize'; 
import { DateRangePicker } from 'react-dates'; 
import 'react-dates/lib/css/_datepicker.css'; 
moment.locale('pt-br'); 

class Details extends Component { 

constructor (props){ 
    super(props) 
    this.state={ 
    startDate: "", 
    endDate: "", 
    focusedInput: "", 
    } 
render() { 
    const endDateString = this.state.endDate && this.state.endDate.format('DD-MM-YYYY'); 
    const startDateString = this.state.startDate && this.state.startDate.format('DD-MM-YYYY'); 
    const startDateArr = startDateString.split("-"); 
    const endDateArr = endDateString.split("-"); 
    const a = moment(startDateArr); 
    const b = moment(endDateArr); 
    const Diff = a.diff(b, 'days'); 

    return (
     <div> 
     <DateRangePicker 
          startDate={this.state.startDate} // momentPropTypes.momentObj or null, 
          endDate={this.state.endDate} // momentPropTypes.momentObj or null, 
          onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired, 
          focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null, 
          onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired, 
          endDatePlaceholderText={"Bis"} 
          startDatePlaceholderText={"Ab"} 
          displayFormat={"DD/MM/YYYY"} 
         /> 
         {startDateString} 
         <br/> 
         {endDateString} 
         <br/> 
         {Diff} 
    </div> 
)} 
} 

答えて

0

のドキュメントによると、順序があり、すべてを行っているが、あなたは、 [日、月、年]を指定します。書式呼び出しを 'YYYY-MM-DD'に変更すると、コードが機能すると思います。

+0

私はそれを変更しましたが、うまくいきませんでした – HarryTgerman

+0

私はそれを得ました、私は配列に分割するべきではありません – HarryTgerman

関連する問題