How to change the timezone of the date object

Question

I am using moment to set/change the timezone of my date object and not any other date/time value

This is what I am presently doing :

const moment = require("moment-timezone");
const dateNew = moment.tz(accountDate, "US/Pacific");

This is the accountDate value: Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time)

I want to change it to: Mon Jul 08 2019 06:05:22 GMT-0700 (Pacific Daylight Time)

but the dateNew is still in EDT timezone.

the output of `console.log(dateNew)` is :


Moment {_isAMomentObject: true, _i: Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time), _isUTC: true, _pf: {…}, _locale: Locale, …}
_d: Sun Jul 07 2019 23:05:22 GMT-0400 (Eastern Daylight Time) {}
_i: Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time) {}
_isAMomentObject: true
_isUTC: true
_isValid: true
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", ordinal: ƒ, _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, …}
_offset: -420
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
_z: Zone {name: "US/Pacific", abbrs: Array(186), untils: Array(186), offsets: Array(186), population: 15000000}
__proto__: Object

but console.log(new Date(dateNew)) gives the following output.

Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time)

Kindly help. Thanks

Answer 1

You are indeed changing the timezone, everything is working fine, just add a format(), I don't have enough reputation to comment this yet, lol, but why are you using Date(), just stick to moment()

 const dateNew = moment.tz(accountDate, "US/Pacific").format();
 console.log(dateNew)

Answer 2

Since you included reactjs tag. I will give you an answer in react.js way. You could install npm package named moment-timezone to solve this. Please take a look in their docs as well. Here is a full example in React

import React, { Component } from "react";
import ReactDOM from "react-dom";
import moment from "moment-timezone";
import "./styles.css";

class App extends Component {
  render() {
    const _date = "Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time)";
    const result = moment.tz(_date, "US/Pacific");
    return (
      <div>
        <p>Origin Date : {_date}</p>
        <p>
          Converted Date : {result.format()} {result.tz()}
        </p>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The above code will results like this

Answer 3

I'm posting it as another answer so I can add it as code @Tanu

const accountDate = 'Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time)' 
const dateNew = moment(accountDate).tz('US/Pacific') 
console.log(dateNew.format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ zz')) 


//OUTPUT: Mon Jul 08 2019 03:05:22 GMT-0700 PDT

Additionally, you can add change the abbreviations like this and add a parenthesis with some other square brackets:

var abbrs = {
    EST : 'Eastern Standard Time',
    EDT : 'Eastern Daylight Time',
    CST : 'Central Standard Time',
    CDT : 'Central Daylight Time',
    MST : 'Mountain Standard Time',
    MDT : 'Mountain Daylight Time',
    PST : 'Pacific Standard Time',
    PDT : 'Pacific Daylight Time',
};

moment.fn.zoneName = function () {
    var abbr = this.zoneAbbr();
    return abbrs[abbr] || abbr;
}

So the output would now bew:

console.log(dateNew.format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ [(]zz[)]')) 

Mon Jul 08 2019 03:05:22 GMT-0700 (Pacific Daylight Time)