Daily Countdown Timer for Shipping hours

Question

Trying to build a daily "order by" countdown until daily shipping cutoff time. (prefer to keep vanilla js) - on this particular application, server side scripting is not an option.

1: I'm trying to ensure how to set the time to a specific EST time (6pm daily) and not sure if that's possible with vanilla JS?

2: when the timer is counting down and get under an hour left, it reads like 0:mm:ss - is it possible to just hide the hour when it's 0 and only show the mm:ss?

FIDDLE: http://jsfiddle.net/bill9000/rwet0o5f/96/

if (document.getElementById('countdownTimer')) {
    pad = function(n, len) { // leading 0's
        var s = n.toString();
        return (new Array( (len - s.length + 1) ).join('0')) + s;
    };

    var timerRunning = setInterval(
        function countDown() {
            var now = new Date();
            if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
                var target = 15; // 15:00hrs is the cut-off point                               -------- Trying to get 6pm EST regardless of user time zone
                if (now.getHours() < target) { // would be best if could hide the whole counter if past cutoff point each day
                    var hrs = (target - 1) - now.getHours();
                    //if (hrs < 0) hrs = 0;
                    if (hrs = 0) '';
                    var mins = 59 - now.getMinutes();
                    if (mins < 0) mins = 0;
                    var secs = 59 - now.getSeconds();
                    if (secs < 0) secs = 0;
                    var str = 'Order in the next <strong>' + hrs + ':' + pad(mins, 2) + ':' + pad(secs, 2) + '</strong> to ship <strong>today</strong>.' ;
                    document.getElementById('countdownTimer').innerHTML = str;
                }
            }
        }, 1000
    );
}

Answer 1

lately i've been thinking... (it's working everywhere on the earth)

const
  CountDownZone = document.querySelector('#count-down-Timer strong'),
  TimeTarget    = 15   // 15:00hrs is the cut-off point   
  ;
function pad(n, len) { // leading 0's
  let s = n.toString();
  return '0'.repeat(Math.max(len - s.length, 0)) + s;
};

var timerRunning = setInterval(countDown, 1000);

function countDown() {
  let
    localTime = new Date(),                // get your local time
    utcTime   = localTime.getUTCHours(),  // find UTC hours
    estTime   = new Date()               // create a new date object for the EST time
    ;
    estTime.setHours(utcTime-5);        // adjust it for EST hours.


  if (
     (estTime.getDay() > 0) && (estTime.getDay() < 6)       // Monday to Friday only
  && (estTime.getHours() < TimeTarget)
     ) 
  {                     
    let
      count_HM = [],
      hrs  = (TimeTarget - 1) - estTime.getHours(),
      mins = 59 - estTime.getMinutes(),
      secs = 59 - estTime.getSeconds()
      ;

    if (hrs > 0)             { count_HM.push(hrs + ' hour(s)'); }
    if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
    count_HM.push(pad(secs, 2)+ ' second(s)');

    CountDownZone.textContent = count_HM.join(' - ');
  }
  else {
    document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
    clearInterval(timerRunning);
  }
}

#count-down-Timer {
  padding: 20px 10px 20px 10px;
  background-color: #afc8c5
}

<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>

Answer 2

You can use the getUTC... functions to get the UTC time parts and then adjust them to the time zone you're looking for. You can get the UTC date then adjust it to get EST time.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay

// create a date based on the user's timezone
d = new Date();

// get the universal time, then remove the difference between UTC and EST, to get the EST hours
elem.innerHTML = d.getUTCHours() - 5;

To hide the date parts just add the parts in an array and join using ':', that will handle the concatenation for you without you needed to add more logic.

You can also use the array length to work out the correct unit

      var arr_parts = [];
      var hrs = (target - 1) - now.getHours();
      var mins = 59 - now.getMinutes();
      var secs = 59 - now.getSeconds();

      if ( hrs ) {
        arr_parts.push( hrs );
      }
      arr_parts.push( pad( mins, 2 ) );
      arr_parts.push( pad( secs, 2 ) );

      // number of parts to the countdown 
      // 3 = h:m:s
      // 2 = m:s
      // 1 = s
      part_length = arr_parts.length;

      // the biggest unit for the countdown 
      // so length of 1 means we need seconds at index 0)
      arr_units = [ 'seconds', 'minutes', 'hours' ]
      str_unit = arr_units[ part_length - 1 ];

      var str = 'Order within the next <strong>' 
        + arr_parts.join( ':' ) 
        + ' ' + str_unit
        + '</strong> to ship <strong>today</strong>.';

Here's the modified version of the JSfiddle I used (cut off time changed so it works when I last used the fiddle) http://jsfiddle.net/gwxptbfh/