Changing time format when sending from React.js to the backend server

Question

I'm trying to send dates range to backend node server. Everything works just fine and the time I'm choosing in my calendar is correctly picked, ie. dates I'm choosing in the calendar are the same just before sending it to the backend. But when I'm checking my payload inside console's network the day is not correct anymore - it is always one day earlier. For some reason I don't know dates are changed with that one day.

Here's my chunk of code:

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);

For example here's my log (at the position the same as above) when trying to choose 20th and 21st of August.

[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)]

By my payload shows this:

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

Can you give us the expected behavior and what it is current behavior ? — Sergio Escudero, Aug 27 '18 at 19:59
This should most probably be because of Timezones when using Javascript Date Object. See this - https://stackoverflow.com/questions/7556591/javascript-date-object-always-one-day-off — Vijay Venugopal Menon, Aug 27 '18 at 20:01

score 0 · Answer 1 · answered Aug 27 '18 at 23:36

Would you be able to share the implementation details of sendDateRange ? After running your code, it appears that the only place that date conversion could occur is after the call to sendDateRange.

How are you converting the dates to strings before sending them over the network?

score 0 · Answer 2 · answered Aug 28 '18 at 09:41

I think I found a way to control it:

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

So whole code looks like this now:

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);

Thank you for routing me on the right track!

Changing time format when sending from React.js to the backend server

2 Answers2