Я работаю над кодом, как показано ниже, в котором , когда часовой пояс выбран из пользовательского интерфейса , отображает список шоу (как упомянуто в описании проблемы ниже) с их соответствующими временами часового пояса. Теперь мне нужна дата вверху для шоу, когда выбраны разные часовые пояса .На данный момент нет даты.
<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, когда data-timezone = "et" или data-timezone =«pt» или data-timezone = «mt» (любой из них из пользовательского интерфейса) выбран, поэтому он должен отображаться следующим образом с датой вверху:
Когда часовой пояс et выбрано, должно выглядеть так с датой вверху
April 11
01:00 Show#A
02:30 Show#B
03:30 Show#C
Когда выбран часовой пояс pt, оно должно выглядеть так с датой вверху
April 10
22:00 Show#A
23:30 Show#B
April 11
00:30 Show#C
Когда выбран часовой пояс mt, он должен выглядеть следующим образом с датой вверху
April 10
23:00 Show#A
April 11
00:30 Show#B
01:30 Show#C
На данный момент он неНе показывать ни одной даты.Только время и шоу #
Это то, что я пробовал (я поместил свой сценарий в скрипку https://jsfiddle.net/5bmoe4tq/, поскольку я хочу, чтобы вопрос был коротким), но это не такпохоже на работу.