Показать время в зависимости от часового пояса на WordPress с JS и PHP

Question

У меня есть плагин, который предлагает пользователю time_slots для бронирования.Проблема в том, что не имеет значения, где в мире вы будете видеть часы в utc-4.Я хочу, чтобы клиент видел время, отображаемое его часовым поясом

, я большой новичок в js / php, но я предполагаю, что мне понадобится небольшая функция, которая переводит $ slot в пользовательское время, прежде чем печатать его с помощью

while (strtotime($date_from) < strtotime($end_date)) 
         {
             $cdiv++;

             $day_num_of_week = date('N', strtotime($date_from));   


             ?>
              <h3><?php echo date('l, j F, Y', strtotime($date_from))?> - <?php echo  $day_num_of_week?></h3>

              ?>

              <div class="bup-time-slots-divisor" id="bup-time-sl-div-<?php echo $cdiv?>">

             <?php  //get available slots for this date

             $time_slots = $this->get_time_slot_public_for_staff($day_num_of_week,  $staff_id, $b_category, $time_format);


 $cdiv_range = 0 ;

 foreach($time_slots as $slot)
             {
                  $cdiv_range++;                 
                 ?>

                <li id="bup-time-slot-hour-range-<?php echo $cdiv?>-<?php echo $cdiv_range?>">

                <span class="bup-timeslot-time"><i class="fa fa-clock-o"></i>&nbsp;&nbsp;<?php echo $slot['from'].' &ndash; '.$slot['to']?></span>
                <span class="bup-timeslot-count"><span class="spots-available">1 time slot available</span></span>
                <span class="bup-timeslot-people">
                <button class="new-appt bup-button bup-btn-book-app" bup-data-date="<?php echo date('Y-m-d', strtotime($date_from))?>" bup-data-timeslot="<?php echo $b_category.'-'.$staff_id?>">

                <span class="button-timeslot"></span><span class="bup-button-text">
                <?php _e('Book Appointment','bookingup')?></span></button>
                 </span>

                </li>   

<?php  } //end for each time slots ?>

</div>


<?php 
 //increase date
 $date_from = date ("Y-m-d", strtotime("+1 day", strtotime($date_from)));


  } 

?>

</ul>

я хочу, чтобы пользователь видел временной интервал в зависимости от своего часового пояса, например, ej в Австралии - на день позже, или в x городе - на 2 часа раньше

любая помощь будет удивительной !!

Answer 1

Вы можете сделать это так:

var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;

и поместите переменную dateTime в тэг HTML, который вы хотите следующим образом:

document.getElementById('idElement').innerHTML = dateTime;

и ваш тег HTML выглядит так:

 <div id='idElement'>Here you will find your input (time)</div>