I want to get New York time in this JavaScript clock?

Question

I want to get the New York time in this JavaScript. I tried with toLocaleTimeString('en-US', { timeZone: 'America/New_York' })

But it doesn't work.

Javascript:

setInterval(setClock, 1000)

const hourHandTK = document.querySelector('[data-hour-hand-tk]')
const minuteHandTK = document.querySelector('[data-minute-hand-tk]')
const secondHandTK = document.querySelector('[data-second-hand-tk]')

function setClock() {

var currentDate = new Date()
  const secondsRatio = currentDate.getSeconds() / 60
  const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
  const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
  setRotation(secondHandTK, secondsRatio)
  setRotation(minuteHandTK, minutesRatio)
  setRotation(hourHandTK, hoursRatio)
}

function setRotation(element, rotationRatio) {
  element.style.setProperty('--rotation', rotationRatio * 360)
}

setClock()

Full code:

setInterval(setClock, 1000)

const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')

function setClock() {
  const currentDate = new Date()
  const secondsRatio = currentDate.getSeconds() / 60
  const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
  const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
  setRotation(secondHand, secondsRatio)
  setRotation(minuteHand, minutesRatio)
  setRotation(hourHand, hoursRatio)
}

function setRotation(element, rotationRatio) {
  element.style.setProperty('--rotation', rotationRatio * 360)
}

setClock()

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%));
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.clock {
  width: 300px;
  height: 300px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 50%;
  border: 2px solid black;
  position: relative;
}

.clock .number {
  --rotation: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(var(--rotation));
  font-size: 1.5rem;
}

.clock .number1 { --rotation: 30deg; }
.clock .number2 { --rotation: 60deg; }
.clock .number3 { --rotation: 90deg; }
.clock .number4 { --rotation: 120deg; }
.clock .number5 { --rotation: 150deg; }
.clock .number6 { --rotation: 180deg; }
.clock .number7 { --rotation: 210deg; }
.clock .number8 { --rotation: 240deg; }
.clock .number9 { --rotation: 270deg; }
.clock .number10 { --rotation: 300deg; }
.clock .number11 { --rotation: 330deg; }

.clock .hand {
  --rotation: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  border: 1px solid white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform-origin: bottom;
  z-index: 10;
  transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}

.clock::after {
  content: '';
  position: absolute;
  background-color: black;
  z-index: 11;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.clock .hand.second {
  width: 3px;
  height: 45%;
  background-color: red;
}

.clock .hand.minute {
  width: 7px;
  height: 40%;
  background-color: black;
}

.clock .hand.hour {
  width: 10px;
  height: 35%;
  background-color: black;
}














/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
    font-family: Raleway;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-youtube {
  background-color: red;
}

.side-link-twitter {
  background-color: #1DA1F2;
}

.side-link-github {
  background-color: #6e5494;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

<div class="clock">
  <div class="hand hour" data-hour-hand></div>
  <div class="hand minute" data-minute-hand></div>
  <div class="hand second" data-second-hand></div>
  <div class="number number1">1</div>
  <div class="number number2">2</div>
  <div class="number number3">3</div>
  <div class="number number4">4</div>
  <div class="number number5">5</div>
  <div class="number number6">6</div>
  <div class="number number7">7</div>
  <div class="number number8">8</div>
  <div class="number number9">9</div>
  <div class="number number10">10</div>
  <div class="number number11">11</div>
  <div class="number number12">12</div>
</div>

<!-- Side Links Only -->
<div class="side-links">
  <a href="https://youtu.be/Ki0XXrlKlHY" target="_blank" class="side-link side-link-youtube">
    <i class="fab fa-youtube-square side-link-icon"></i>
    <span class="side-link-text">View Tutorial</span>
  </a>
  <a href="https://github.com/WebDevSimplified" target="_blank" class="side-link side-link-github side-link-icon">
    <i class="fab fa-github-square"></i>
    <span class="side-link-text">View GitHub</span>
  </a>
  <a href="https://twitter.com/DevSimplified" target="_blank" class="side-link side-link-twitter">
    <i class="fab fa-twitter-square side-link-icon"></i>
    <span class="side-link-text">View Twitter</span>
  </a>
</div>

Does this answer your question? [How to convert date time saved in New York timezone to local time zone in javascript?](https://stackoverflow.com/questions/55698456/how-to-convert-date-time-saved-in-new-york-timezone-to-local-time-zone-in-javasc) — Janeth Fernando, Sep 26 '21 at 13:34

score 1 · Accepted Answer · answered Sep 26 '21 at 13:03

1

toLocaleTimeString converts your Date to a String.

This should work

const currentDate = new Date(new Date().toLocaleString("en-US", {timeZone: "America/New_York"}));

answered Sep 26 '21 at 13:03

martinenzinger

2,166
2
17
20

I tried but it didn't work. Thank you for your comment. – Chow Lip Sep 26 '21 at 13:11
It works fine for me. I ran it at 15:32 in CET timezone and the returned Date object says 09:32 (which is the current time in New York). In what way does it not work for you? What browse are you testing this in (pretty sure this won't work in Internet Explorer)? – Karl-Johan Sjögren Sep 26 '21 at 13:34
I tried in chrome and firefox developer edition but it didn't work. – Chow Lip Sep 26 '21 at 13:45
Thank you, that's worked. It wasn't working on my browsers that might for the cookies. Thanks a lot. – Chow Lip Sep 28 '21 at 14:25

score 0 · Answer 2 · answered Sep 26 '21 at 13:22

Sure toLocaleTimeString('en-US', { timeZone: 'America/New_York' }) wont work, cuz it returns the time part of the date as a string (e.g: 9:19:06 AM)

In your case, I guess this would be the solution:

var currentDate = new Date(
    (new Date()).toLocaleString(
        'en-US',
        { timeZone: 'America/New_York' }
    )
)

score 0 · Answer 3 · answered Sep 26 '21 at 13:36

0

This is kind of your choice if you want to or not but if you want, try using nodejs, after you install it you can just install https://www.npmjs.com/package/moment and then the only code you need is

var moment = require("moment-timezone")

var june = moment(new Date());
june.tz('America/New_York').format('ha z');

if you would like I can also help you through the installing process.

answered Sep 26 '21 at 13:36

Aqua

37
8

Thank you for your reply. `var currentDate = new Date( (new Date()).toLocaleString( 'en-US', { timeZone: 'America/New_York' } ) )` worked for me. – Chow Lip Sep 28 '21 at 14:23

I want to get New York time in this JavaScript clock?

3 Answers3

Linked