0

I have wordpress website where I am creating events with time to it. I can access it using following in my php function file.

$start_date = DateTime::createFromFormat( AGENDA_SESSION_DATE_RETURN_FORMAT, $session['start_date'] );
$start_date = strtoupper( $start_date->format( 'g:i a' ) );

$end_date = DateTime::createFromFormat( AGENDA_SESSION_DATE_RETURN_FORMAT, $session['end_date'] );
$end_date = strtoupper( $end_date->format( 'g:i a' ) ); 

It uses server time and I want to convert it into Visitor local time + PST time.

I have following server time stored into database. enter image description here

I want to convert it into following. enter image description here

I don't want make it using visitor's IP address.

Instead I want to use visitor's OS Time which can be accessed using into JavaScript.

I can pass PHP date into JavaScript. Is there any way to do this ?

Requirement: display the times in the user's timezone instead of the server's timezone. Anyone can help me into this ?? Thanks

Viral
  • 441
  • 9
  • 17

1 Answers1

1

Try following steps

Step 1 : Add PHP Server date timestamp to the html data field of your template.

<span class="soap_time_custom" 
data-starttime="<?php echo strtotime(get_field( 'start_date_time', $post_id )); ?>" 
data-endtime="<?php echo strtotime(get_field( 'end_date_time', $post_id )); ?>" ></span>

enter image description here

Step 2 : Calculate difference of your server time with visitor's local time. Code sample below.

Step 3 : For timezone use moment.js from here.

$(document).ready(function() {
    var timedelay = setTimeout(function(){ 

        if($(".soap_time_custom").length>0)
        {
            $(".soap_time_custom").each(function(index, element) {
                
                var starttime = $(this).data("starttime"); // 2020-10-18 18:00:00   /  1603044000
                var endtime   = $(this).data("endtime");   // 2020-10-18 18:10:00   
    
                if(starttime !== "" && endtime != ""){
                    
                    var d = new Date();
                    var n = d.getTimezoneOffset();
                    var ClientSide_starttime    = new Date((parseFloat(starttime)+n+350)*1000); 
                    var ClientSide_endtime      = new Date((parseFloat(endtime)+n+350)*1000);           
                    
                    //var local_time_zone       = (new Date()).toTimeString().match(new RegExp("[A-Z](?!.*[\(])","g")).join('');
                    var local_time_zone         = moment.tz(Intl.DateTimeFormat().resolvedOptions().timeZone).zoneAbbr();                   
                    var new_local_time          = formatAMPM(ClientSide_starttime)+" / "+formatAMPM(ClientSide_endtime)+" "+local_time_zone.toUpperCase();
                    $(this).html(new_local_time+" &nbsp; &#8212 &nbsp; ");
                }
                
            }); 
        }
    
    }, 2500,'');

    function formatAMPM(date) {
          var hours = date.getHours();
          var minutes = date.getMinutes();
          var ampm = hours >= 12 ? 'pm' : 'am';
          hours = hours % 12;
          hours = hours ? hours : 12; // the hour '0' should be '12'
          minutes = minutes < 10 ? '0'+minutes : minutes;
          var strTime = hours + ':' + minutes + ' ' + ampm;
          return strTime;
    }
    
});

enter image description here

Note : For timezone you will have to use 2 files momentjs and timezone extension as shown in screenshot above.

Viral
  • 1,329
  • 1
  • 9
  • 31