Popup Start Time/Date and End Time/Date by EST Timezone

Below code will allow you to set popup with a start time and end time based on EST.

Make sure to replace the code that is already there with the below.


  popup.js
function changeTimezone(date, ianatz) {

  // suppose the date is 12:00 UTC
  var invdate = new Date(date.toLocaleString('en-US', {
    timeZone: ianatz
  }));

  // then invdate will be 07:00 in Toronto
  // and the diff is 5 hours
  var diff = date.getTime() - invdate.getTime();

  // so 12:00 in Toronto is 17:00 UTC
  return new Date(date.getTime() - diff);

}

    evaluateStartDate = function(){
        console.log('evaulating date');

        currentTime = new Date();
        currentTime = changeTimezone(currentTime, "America/Toronto");
      
        var startTime = document.getElementById("promo-start-time").innerHTML;
      	var endTime = document.getElementById("promo-end-time").innerHTML;

        
        //startDate = new Date( "April 6, 2020 011:34:00" );
        //endDate = new Date( "April 6, 2020 011:35:00" );
        startDate = new Date( startTime );
        endDate = new Date( endTime );

        console.log("the current date is " + currentTime);
        console.log("the promo starts " + startDate);
        console.log("the promo ends " + endDate);

        //the plus implies milliseconds     
        if(startDate < currentTime && endDate > currentTime){
            console.log('past start date');
            return true;  
        }
        else if(endDate < currentTime){
            console.log('past end date');
            return false;
        }
        else{
            console.log('not past start & end date');
            return false;
        }
    }

  popup.liquid
    <!-- Dates For Popup Debut -->
    <div id="promo-start-date" style="display: none !important; opacity: 0; visibility: hidden;">
      <div id="promo-start-time">{{ settings.popup-start-time }}</div>
  	  <div id="promo-end-time">{{ settings.popup-end-time }}</div>
    </div>

  settings_schema.json
      {
        "type": "text",
        "id": "popup-start-time",
        "label": "Popup Start Time (EST)",
        "info": "e.g. (April 6, 2020 11:04:55 AM)"
      },
      {
        "type": "text",
        "id": "popup-end-time",
        "label": "Popup End Time (EST)",
        "info": "e.g. (May 26, 2021 18:35:00 PM)"
      },

Leave a comment