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

0

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>

edited Apr 11, 2019 at 14:36

answered Apr 10, 2019 at 20:31

Steve0

2,2532 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

flash Over a year ago

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.

flash Over a year ago

It is just changing time but dates are fixed at their place.

flash Over a year ago

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

Steve0 Over a year ago

I just use it for reference, to get the times from. In this snippet I just use it for information storage.

flash Over a year ago

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

0

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

answered Apr 19, 2019 at 14:56

mario ruiz

1,0203 gold badges16 silver badges33 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related