add class in javascript/jquery when a particular timezone is selected from UI

Question

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.

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>

Problem Statement:

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:

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

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

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.

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.

I do not see any javascript in your post. Have you attempted any? — Steve0
– Steve0, Commented Apr 10, 2019 at 20:17
Also don't need all those repetitive if/else that all do basically the same thing — charlietfl
– charlietfl, Commented Apr 10, 2019 at 20:44
Your logic is flawed in your if($(time).attr('data-timezone') === 'nt'). That only checks the very first one in page. Same with getting a datetime attribute — charlietfl
– charlietfl, Commented Apr 10, 2019 at 20:48
I would start over completely and focus on iterating instances with one process for all timezones/ all shows — charlietfl
– charlietfl, Commented Apr 10, 2019 at 20:53

Steve0 · Accepted Answer · 2019-04-11 14:36:15Z

I have modified your code to handle one of the button clicks instead of a wrapper click.

I am not entirely clear what DOM manipulation you are shooting for so I implemented a container(s) to hold the show times, and populate them

jQuery(function($) {
  //this function will update the timezone when you click a button
  $("button[data-timezone]").click(function() {
    $(this).closest(".schedule-wrapper").attr("data-timezone", $(this).attr("data-timezone"));
    //clear the day-schedules
    $(".day-schedule").empty();
    //repopulate based on the selected timezone
    populateDays();
  });
  populateDays();
});

function populateDays() {
  let targetZone = $('#js-schedule-wrapper').attr('data-timezone');
  $.each($(".day-schedule"), function(idx, elem) {
    let day = $(elem).attr("day");
    $(elem).text(day);
    //get the times for the day, show be damned
    let showtimes = $(`time[data-timezone=${targetZone}][datetime~='${day}']`);
    $.each(showtimes, function(i, time){
      $(elem).append($(time).clone());  //copy the time into the days schedule
    });
  });
}

.day-schedule {
  border: 1px solid black;
  width: 50%;
  margin: auto;
  margin-top: 5px;
}

.schedule-show {
  display: none
}
time{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schedule-wrapper" id="js-schedule-wrapper" data-timezone="pt"> // Line#A
  <div class="schedule-action-bar">
    <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 day='10-04-2019' class='day-schedule'>
  </div>
  <div day='11-04-2019' class='day-schedule'>
  </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>

After reviewing your linked page, it looks like you can accomplish what you want in the following way. Note that I had to add the day to the schedule-date-bar so that the javascript could find it easier.

Interate the shows (they must be on the page in order)
Find the target "date-bar" for the show
Move that show to the date-bar it should be under.

jQuery(function($) {
  //this function will update the timezone when you click a button
  $("button[data-timezone]").click(function() {
    $(this).closest(".schedule-wrapper").attr("data-timezone", $(this).attr("data-timezone"));
    //manipulate in case the day changed based on the selected timezone
    populateDays();
  });
  populateDays();
});

function populateDays() {
  let targetZone = $('#js-schedule-wrapper').attr('data-timezone');
  let showtimes = $(`time[data-timezone=${targetZone}]`);
  $.each(showtimes.get().reverse(), function(i, time) {
    let targetDate = $(time).attr("datetime").split(" ")[1];
    let insertionPoint = $(`.schedule-date-bar[day='${targetDate}']`);
    $(time).closest(".schedule-show").insertAfter(insertionPoint);
  });
}

.day-schedule {
  border: 1px solid black;
  width: 50%;
  margin: auto;
  margin-top: 5px;
}

time {
  display: none;
}

[data-timezone=pt] [data-timezone=pt],
[data-timezone=mt] [data-timezone=mt],
[data-timezone=et] [data-timezone=et] {
  display: block;
}

.schedule-date-bar {
  margin-top: 30px;
  margin-bottom: 10px;
  padding-left: 20px;
  color: #34383b;
  background-color: rgba(169, 178, 177, .15);
  position: relative;
  line-height: 2.1;
}

.schedule-show {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
  align-items: baseline;
  cursor: pointer;
  border-bottom: 1px solid #d4d8d8;
  max-width: 697px;
  max-width: 69.7rem;
  margin-left: auto;
}

time {
  -ms-flex: 1 0 16.66%;
  flex: 1 0 16.66%;
  max-height: 36px;
  pointer-events: none;
  padding-right: 20px;
  padding-left: 10px;
  color: #34383b;
  line-height: 2.1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schedule-wrapper" id="js-schedule-wrapper" data-timezone="pt"> // Line#A
  <div class="schedule-action-bar">
    <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 day='10-04-2019' class="schedule-date-bar">
    April 10 </div>
  <div day='11-04-2019' class="schedule-date-bar">
    April 11 </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>

Did you get my question ? If you check the website and in there if we select different timezones then some shows are not under correct date.
It is just changing time but dates are fixed at their place.
At time moment, I have removed the code inside schedule-date-bar class from my codebase and trying to add a date through javascript/jquery
I just use it for reference, to get the times from. In this snippet I just use it for information storage.
why did you add this <div day='10-04-2019' class='day-schedule'> </div> <div day='11-04-2019' class='day-schedule'> </div> ? Its not inside my dom.

mario ruiz · Accepted Answer · 2019-04-19 14:56:48Z

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

Collectives™ on Stack Overflow

add class in javascript/jquery when a particular timezone is selected from UI

2 Answers 2

12 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Linked

Related