show div if users current time with timezone aligns with 'open hours' (ES6)

Question

if (typeof(hoursoperation) != 'undefined' && hoursoperation != null)
    {
      console.log(myJson.acf['office_hours']);



    }

Above within my Fetch API technique; I make sure ' office_hours ' exists, first; and it does: the console.log above prints the following data:

Array(7)
0:
closing_time: "1600"
day: "7"
starting_time: "0800"
__proto__: Object
1:
closing_time: "1600"
day: "1"
starting_time: "0600"
__proto__: Object
2:
closing_time: "1600"
day: "2"
starting_time: "0600"
__proto__: Object
3: {day: "3", starting_time: "0600", closing_time: "1600"}
4: {day: "4", starting_time: "0600", closing_time: "1600"}
5: {day: "5", starting_time: "0600", closing_time: "1600"}
6: {day: "6", starting_time: "0700", closing_time: "1700"}
length: 7
__proto__: Array(0)

How could I get the users local time; then compare through iterate through the above?

I know how easy this is with jQuery; but am getting stuck on approaching this was vanilla ES6 javaScript code.

---

ie Here is how I was able to get there with jQuery: (But still am searching for a ES6 method)

            var today, starttime, endtime;

            var optiondata = JSON.parse(data);

            var officehours = optiondata.acf.office_hours;

            today = new Date();

            var starthour = parseInt(parseInt(officehours[today.getDay()].starting_time)/100);
            var startmin = starthour*100 - parseInt(officehours[today.getDay()].starting_time);

            var endhour = parseInt(parseInt(officehours[today.getDay()].closing_time)/100);
            var endmin = endhour*100 - parseInt(officehours[today.getDay()].closing_time);

            starttime = new Date(today.getFullYear(),today.getMonth(),today.getDate(),starthour,startmin,0,0);

            endtime = new Date(today.getFullYear(),today.getMonth(),today.getDate(),endhour,endmin,0,0);

            // calculate offset for timezones (PST or PDT) to ensure that AlgaeCal is actually open (using Vancouver, B.C.)

            var tzurl = "https://maps.googleapis.com/maps/api/timezone/json?location=49.246670,-123.094729&timestamp=" + parseInt(today.getTime()/1000) + "&key=XXXXX";

            $.ajax({
                url: tzurl,
                dataType: "text",
                success:function(tzdata){
                    $("#hours-operation").hide();

                    var timezonedata = JSON.parse(tzdata);

                    // subtract offsets to get GMT of start and end times of office hours and convert to milliseconds:
                    var chkstarttime = starttime.getTime() - timezonedata.dstOffset*1000 - timezonedata.rawOffset*1000;
                    var chkendtime = endtime.getTime() - timezonedata.dstOffset*1000 - timezonedata.rawOffset*1000;

                    // get offset for current local time and convert to milliseconds
                    var tz = today.toString().split("GMT")[1].split(" (")[0];
                    var chktoday = today.getTime() - parseInt(tz)/100*60*60*1000;

                    // check if current time is truly during open office hours:
                    if(chktoday >= chkstarttime && chktoday <= chkendtime){
                        // show "speak to our bone health specialists message"
                        $("#hours-operation").show();
                    }
                }
            });

        }
    });

Answer 1

First, get the current time in the time zone relevant to the office hours. Since your source data is using HHMM format, get the time in that format also:

// This gives the current local time in Vancouver, in HHMM format, such as 1703 or 0945
const now = new Date().toLocaleTimeString('en-CA', {
    timeZone: 'America/Vancouver', hour12: false, timeStyle: 'short'
    }).replace(':','');

Now you can simply compare values with your source data. This works because time strings in HHMM format are lexicographically sortable.

const isActive = starting_time <= closing_time   // test the shift type (normal or inverted)
    ? (starting_time <= now && closing_time > now)   // normal comparison
    : (starting_time <= now || closing_time > now);  // inverted comparison

In the comments above, a "normal" shift type is one where the shift starts and stops on the same day, such as 0900 to 1700 . An "inverted" shift type is one that spans over midnight, such as 1800 to 0200 .

Note that this only works in environments where the ECMAScript Internationalization API is fully implemented, including time zone support.

Also note that it does not take into account shifts that start or end during the ambiguous hour of a daylight saving time fall-back transition. (Shifts that surround a DST transition entirely should be fine.)