Question

我正在尝试将日期范围发送到后端节点服务器。一切正常，并且正确选择了我在日历中选择的时间。我在日历中选择的日期与发送到后端之前的日期相同。但是，当我在控制台网络中检查我的有效负载时，这一天就不再正确了-它总是提前一天。由于某种原因，我不知道日期会随着那一天而改变。

这是我的大部分代码：

import React, { Component } from 'react';
import Calendar from 'react-calendar';
import { connect } from 'react-redux';
import * as actions from '../../actions';

class Holidays extends Component {

    state = { date: [new Date(), new Date()], dates: [] }

    calculateRange(dateRange) {
        const getDates = (startDate, endDate) => {
            let dates = [],
                currentDate = startDate,
                addDays = function(days) {
                  const date = new Date(this.valueOf());
                  date.setDate(date.getDate() + days);
                  return date;
                };
            while (currentDate <= endDate) {
              dates.push(currentDate);
              currentDate = addDays.call(currentDate, 1);
            }
            return dates;
          };

          const dates = getDates(new Date(dateRange[0]), new Date(dateRange[1]));      
          this.setState({ dates });                                                                                                     
    }

    onChange = date => this.calculateRange(date[0], date[1]);

    handleClick() {
        const { dates } = this.state;
        console.log(dates); // -----here still I'm getting correct values
        const { sendDateRange } = this.props;
        sendDateRange({ dates });
    }

    render() { 
        return ( 
            <div className="centered-column">
                <h1>Holidays</h1>
                <Calendar
                    onChange={(date) => this.calculateRange(date)}
                    value={this.state.date}
                    locale="pl"
                    returnValue="range"
                    selectRange={true}
                />
                <a className="btn margin__vertical" onClick={() =>  this.handleClick()}>BOOK</a>
            </div>
         );
    }
}

export default connect(null, actions)(Holidays);

例如，这是我尝试选择8月20日和21日时的日志（与上面的位置相同）。

[Mon Aug 20 2018 00:00:00 GMT+0200 (Central European Summer Time), Tue Aug 21 2018 00:00:00 GMT+0200 (Central European Summer Time)]

通过我的有效载荷显示：

"2018-08-19T22:00:00.000Z", "2018-08-20T22:00:00.000Z"

Answer 1

您是否可以共享sendDateRange的实施细节？运行代码后，似乎唯一可以进行日期转换的地方是在调用sendDateRange之后。

在通过网络发送日期之前，如何将日期转换为字符串？

Answer 2

我想我找到了一种控制它的方法：

  const startingTime = dateRange[0],
        correctedTime = new Date( startingTime.getTime() + startingTime.getTimezoneOffset()* -60000 );

所以整个代码现在看起来像这样：

import React, { Component } from 'react';
import Calendar from 'react-calendar';
import { connect } from 'react-redux';
import * as actions from '../../actions';

class Holidays extends Component {

    state = { date: [new Date(), new Date()], dates: [] }

    calculateRange(dateRange) {
        const getDates = (startDate, endDate) => {
            let dates = [],
                currentDate = startDate,
                addDays = function(days) {
                  const date = new Date(this.valueOf());
                  date.setDate(date.getDate() + days);
                  return date;
                };
            while (currentDate <= endDate) {
              dates.push(currentDate);
              currentDate = addDays.call(currentDate, 1);
            }
            return dates;
          };

          const startingTime = dateRange[0],
                correctedTime = new Date( startingTime.getTime() + startingTime.getTimezoneOffset()* -60000 );  //here's the magic ;)

          const dates = getDates(correctedTime, dateRange[1]);      
          this.setState({ dates });                                                                                                     
    }

    onChange = date => this.calculateRange(date[0], date[1]);

    handleClick() {
        const { dates } = this.state;
        const { sendDateRange } = this.props;
        sendDateRange({ dates });
    }

    render() { 
        return ( 
            <div className="centered-column">
                <h1>Holidays</h1>
                <Calendar
                    onChange={(date) => this.calculateRange(date)}
                    value={this.state.date}
                    locale="pl"
                    returnValue="range"
                    selectRange={true}
                />
                <a className="btn margin__vertical" onClick={() =>  this.handleClick()}>ZAREZERWUJ</a>
            </div>
         );
    }
}

export default connect(null, actions)(Holidays);

感谢您按正确的路线安排我！

从React.js发送到后端服务器时更改时间格式

2 个答案: