Javascript time zone calculation issues

Question

I am trying to make a countdown timer for ticket response expiry. My code will successfully calculate the time left when dealing with hours bar the extra hour (+0100) GMT.

I have tried dealing with this in all manner of ways suggested on here to no avail. Any suggestions? Should I give in & learn Luxon?

The converttoUTC function seen is not called as it has not worked & only messed up the calculation further.

The dates that's been pulled from the table is in the following format 2022-04-15 17:47:19 The Time Limits being pulled from the table are in the following format, "15 mins" "6 hours".

    <!--===========================================================================================-->

    <script>
        function func(creationDatePlusLimit) {
            // var dateValue= document.getElementById("date").value;

            var date =  Math.abs((new Date().getTime() / 1000).toFixed(0));
            var date2 = Math.abs((new Date(createdOnDate).getTime() / 1000).toFixed(0));
            var diff = date2 - date;

            var days = Math.floor(diff / 86400);
            var hours = Math.floor(diff / 3600) % 24;
            var mins = Math.floor(diff / 60) % 60;
            var secs = diff % 60;


            // document.getElementById("data").innerHTML = days + " days, " + hours + ":" + mins + ":" + secs;
            if (days>=0) {
                return days + " days, " + hours + ":" + mins + ":" + secs;
            } else {
                return "late";
            }
        }


        const loopThroughTableRows = () => {
            const tableRows = Array.from(document.getElementsByTagName('tr'));
            tableRows.shift(); // removes first one, header

            tableRows.forEach(row => {
                var rowCols = row.getElementsByTagName('td');
                var createdOnDate = rowCols[3];
                var timeLimit = rowCols[7];

                function convertDateToUTC(date) {
                    return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
                }

               const  createdDate = new Date(createdOnDate.innerText);




                // if time limit is in days, remove text, & add to creation date-------------------//
                var limitdays = timeLimit.innerText;
                if (limitdays.includes(" days")) {
                    limitdays = limitdays.replace("days", "");
                    limitdays= parseInt(limitdays);

                    function addDaysToDate(createddate, days) {
                        var result = createddate;
                        result.setDate(createddate.getDate()+days);
                        return result;
                    }
                    var newDate = addDaysToDate(createdDate, limitdays);

                    // format newdate to iso & remove unwanted characters
                    newDate = newDate.toISOString();
                    if (newDate.includes("T")) {
                        newDate = newDate.replace("T", " ");
                    }
                    if (newDate.includes(".000Z")) {
                        newDate = newDate.replace(".000Z", "");
                    }
                };
                //===================================================================================//

                // if time limit is in hours, remove text, & add to creation date-------------------//
                // var limithours = timeLimit.innerText;
                // if (limithours.includes(" hours")) {
                //     limithours = limithours.replace("hours", "");
                //     limithours= parseInt(limithours);
                //
                //     function addHoursToDate(createddate, hours) {
                //         var result = createddate;
                //         // result.setHours(createddate.getDate()+6);
                //         return result;
                //     }
                //     var newDate = addHoursToDate(createdDate, limithours);
                //
                //     // format newdate to iso & remove unwanted characters
                //     newDate = newDate.toISOString();
                //     if (newDate.includes("T")) {
                //         newDate = newDate.replace("T", " ");
                //     }
                //     if (newDate.includes(".000Z")) {
                //         newDate = newDate.replace(".000Z", "");
                //     }
                // };
                //===================================================================================//

            const testRow = rowCols[8];
                const timeDifference = func(newDate);
                testRow.innerText = newDate;
            });
        }
        loopThroughTableRows();

        setInterval(loopThroughTableRows, 1000)
    </script>   

Answer 1

Given you have a creation date like "2022-04-15 17:47:19" and duration to expiry in the format "n [days|hours|minutes]", you probably want to do everything as local to avoid timezone issues. If you use Date objects, then it's simple represent it as a UTC timestamp using toISOString.

Consider the following, which returns a Date object for the expiry based on the creationDate and time limit. It does everything as local, so timezone and daylight saving issues are handled by the Date object. There's no validation of input, so that should be added.

// Parse YYYY-MM-DD HH:mm:ss as local
function parseISOLocal (ts) {
  let [Y, M, D, H, m, s] = ts.split(/\D/);
  return new Date(Y, M-1, D, H, m, s);
}

// Format a Date as YYYY-MM-DD HH:mm:ss
function formatISOLocal(date = new Date()) {
  return date.toLocaleString('en-CA',{hour12: false}).replace(',','');
}

// Parse limit in "value [days|hours|minutes]" to {value, unit}
// e.g. "3 days" to {value: 3, unit:'day'}
function normaliseLimit(limit) {
  let [value, unit] = limit.toLowerCase().split(/\s+/);
  return {value: +value, unit: {d:'day', h:'hour', m:'minute'}[unit[0]]};
}

// Given:
//   createdAt in YYYY-MM-DD HH:mm:ss format and
//   limit as "number [days|hours|minutes]" return a Date for expiry
//   I.e. createdAt plus limit
function getExpiryDate(createdAt, limitString) {
  let expiry = parseISOLocal(createdAt);
  let limit = normaliseLimit(limitString);
  let method = {day:'Date', hour:'Hours', minute:'Minutes'}[limit.unit];
  return new Date(expiry[`set${method}`](expiry[`get${method}`]() + limit.value));
}

let createdAt = formatISOLocal();
[{createdAt: createdAt, limit:'1 Day'},
 {createdAt: createdAt, limit:'3 hours'},
 {createdAt: createdAt, limit:'12 minutes'}
].forEach(({createdAt, limit}) => console.log(
  `createdAt: ${createdAt}\n` +
  `limit    : ${limit}\n` +
  `Expires  : ${formatISOLocal(getExpiryDate(createdAt, limit))}`
));

Once you have the expiry date, you can work out the remaining time as days, hours, minutes, seconds as given at Difference between two dates in years, months, days in JavaScript and use it in a timer to show a count down, to work out which items have expired, etc.