Handling Time Zone in JavaScript

What is Time zone?

GMT, UTC, and Offset

GMT

UTC

Offset

Time zone !== offset?

Summer Time (DST)

Does Time Zone Changes?

Time Zone 1 : Offset N

IANA Time Zone Database

JavaScript and IANA Time Zone Database

Time Zone in Server-Client Environment

Date Object in JavaScript

Creating Date Object with User Input

const d1 = new Date(2017, 2, 11, 11, 30);
d1.toString(); // Sat Mar 11 2017 11:30:00 GMT+0900 (KST)

Creating Date Object Using Server Data

const d1 = new Date(1489199400000);
d1.toString(); // Sat Mar 11 2017 11:30:00 GMT+0900 (KST)
const d1 = new Date('2017-03-11T11:30:00');
const d2 = new Date('2017-03-11T11:30:00Z');
d1.toString(); // "Sat Mar 11 11:30:00 UTC+0900 2017"
d2.toString(); // "Sat Mar 11 20:30:00 UTC+0900 2017"

Creating Data to be Transferred to Server

const d1 = new Date(2017, 2, 11, 11, 30);
d1.getTime(); // 1489199400000
const d1 = new Date(2017, 2, 11, 11, 30);
d1.toISOString(); // "2017-03-11T02:30:00.000Z"
d1.toJSON(); // "2017-03-11T02:30:00.000Z"

const d2 = new Date('Hello');
d2.toISOString(); // Error: Invalid Date
d2.toJSON(); // null

Changing Local Time Zone

const seoul = new Date(1489199400000);
seoul.getTimeZoneOffset(); // -540
function formatDate(date) {
return date.getFullYear() + '/' +
(date.getMonth() + 1) + '/' +
date.getDate() + ' ' +
date.getHours() + ':' +
date.getMinutes();
}

const seoul = new Date(1489199400000);
const ny = new Date(1489199400000 - (840 * 60 * 1000));

formatDate(seoul); // 2017/3/11 11:30
formatDate(ny); // 2017/3/10 21:30

Problem of Converting Local Time Zone

ny.setDate(15);
formatDate(ny); // 2017/3/15 21:30
const time = ny.getTime() + (840 * 60 * 1000);  // 1489631400000
const time = ny.getTime() + (780 * 60 * 1000);  // 1489627800000

Moment Timezone

const seoul = moment(1489199400000).tz('Asia/Seoul');
const ny = moment(1489199400000).tz('America/New_York');

seoul.format(); // 2017-03-11T11:30:00+09:00
ny.format(); // 2017-03-10T21:30:00-05:00

seoul.date(15).format(); // 2017-03-15T11:30:00+09:00
ny.date(15).format(); // 2017-03-15T21:30:00-04:00

Conclusion

References

--

--

--

JavaScript UI Library Open Source by http://ui.toast.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

My most essential tools

Upgrading from React Navigation v2 to v3

Solving Implementation Pain Points with Adobe Experience Platform Web SDK and Edge Network

The Story of a Small Drop Down Component

Hack Wi-Fi Using Aircrack-ng

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

2022 — Happy New Years! — Devery Update

Chat App using WhatsApp web UI and React JS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
TOAST UI

TOAST UI

JavaScript UI Library Open Source by http://ui.toast.com

More from Medium

What’s JavaScript?

Fun with Promises in Javascript

Which JS Framework Your Project Requires: Angular vs. React 2022

Features of Different Javascript Framework : Node Js, BackBone JS, Ext Js