从UI中选择特定时区时，在javascript/jquery中添加类 [英] add class in javascript/jquery when a particular timezone is selected from UI

问题描述

我正在处理如下所示的html代码，该代码来自此 url .在其中，显示时区ET属于正确日期的显示为100％正确，但对于其他时区(PT，MT，CT，AT，NT)，某些显示未处于正确日期.

I am working on a html code as shown below which is from this url. In it shows showing under timezone ET is 100% correct as they are falling under correct dates but for other timezones (PT, MT, CT, AT, NT) some shows are not under correct date.

代码下方的屏幕截图属于以下代码中的类 schedule-action-bar . (此刻已从代码中删除了ct，at和nt，以便将我的问题最小化)

The screen-shot beneath the code belong to the class schedule-action-bar from the code below. (removed ct, at, and nt from the code at this moment in order to minimize my question)

<div class="schedule-wrapper" id="js-schedule-wrapper" data-timezone="et">  <!-- Line#A  -->
   <div class="schedule-action-bar">   <!-- this is on UI, from there we can select PT, MT and ET timezones -->
      <div class="schedule-timezone-filter">
         Select your timezone:            
         <ul id="js-timezone-picker">
            <li>
               <button id="js-time-pt" data-timezone="pt">PT</button>
            </li>
            <li>
               <button id="js-time-mt" data-timezone="mt">MT</button>
            </li>
            <li>
               <button id="js-time-ct" data-timezone="et">ET</button>
            </li>
         </ul>
      </div>
   </div>
   <div class="schedule-show">
      Show#A
      <div class="schedule-show-time">
         <time datetime="22:00 10-04-2019" data-timezone="pt">22:00</time>
         <time datetime="23:00 10-04-2019" data-timezone="mt">23:00</time>
         <time datetime="01:00 11-04-2019" data-timezone="et">01:00</time>
      </div>
   </div>
   <!-- .schedule-show -->
   <div class="schedule-show">
      Show#B
      <div class="schedule-show-time">
         <time datetime="23:30 10-04-2019" data-timezone="pt">23:30</time>
         <time datetime="00:30 11-04-2019" data-timezone="mt">00:30</time>
         <time datetime="02:30 11-04-2019" data-timezone="et">02:30</time>
      </div>
   </div>
   <!-- .schedule-show -->
   <div class="schedule-show">
      Show#C
      <div class="schedule-show-time">
         <time datetime="00:30 11-04-2019" data-timezone="pt">00:30</time>
         <time datetime="01:30 11-04-2019" data-timezone="mt">01:30</time>
         <time datetime="03:30 11-04-2019" data-timezone="et">03:30</time>
      </div>
   </div>
   <!-- .schedule-show -->
</div>

问题陈述:

目前线#A时的数据时区=PT"或数据时区=MT" 被选择(从UI它们的任何人)，那么它应该显示像这样与datebar在顶部:

At line#A when data-timezone="pt" or data-timezone="mt" (anyone of them from the UI) is selected then it should display like this with datebar at the top:

对于时区pt ，它应该看起来像这样，日期在顶部

For timezone pt, it should look like this with date at the top

   April 10
   22:00    Show#A
   23:30    Show#B

   April 11
   00:30   Show#C 

对于时区mt ，它应该看起来像这样，日期在顶部

For timezone mt, it should look like this with date at the top

   April 10
   23:00    Show#A


   April 11
   00:30    Show#B
   01:30    Show#C 

这时，它确实显示日期.除et以外的时区中只有一些节目的日期不正确.尚未包含时区et，因为它可以正常工作.

At this moment, it does show date. Just some shows in timezones apart from et are not under correct dates. Haven't included timezone et as it working fine.

这是我尝试过的方法(我已将脚本放在小提琴中 https://jsfiddle.net/5bmoe4tq/，因为我想简短地回答这个问题)，但似乎不起作用.

This is what I have tried (I have placed my script in the fiddle https://jsfiddle.net/5bmoe4tq/ as I want to make the question short) but it doesn't seem to work.

推荐答案

您可以使用 moment.js 这就是这个图书馆存在的原因

You can use moment.js and that's why this library exists

通过下一条说明，您可以轻松地将时间更新到另一个时区:

You can easily update a time to another time zone by the next instruction:

var newYork    = moment.tz("2014-06-01 12:00", "America/New_York");
var losAngeles = newYork.clone().tz("America/Los_Angeles");
var london     = newYork.clone().tz("Europe/London");

newYork.format();    // 2014-06-01T12:00:00-04:00
losAngeles.format(); // 2014-06-01T09:00:00-07:00
london.format();     // 2014-06-01T17:00:00+01:00

这篇关于从UI中选择特定时区时，在javascript/jquery中添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！