countdownCube

Example 1

      $('#counter').countdownCube( {
        target: '{targetDateStringUTC}',
        cubeSize: 150,
        background:  '#ffff00',
        color: 'blue',
        } );
    

Example 2

      $('#counter-days-only').countdownCube( {
        target: '{targetDateStringUTC}',
        cubeSize: 150,
        background:  'plum',
        color: 'red',
        labelsTranslations: {'year': 'anni',
                             'month': 'mesi',
                             'day': 'giorni',
                             'hour': 'ore',
                             'minute': 'minuti',
                             'second': 'secondi'
                             },
        showDaysOnly: true,
        } );
    

Example 3

Timezone support can be added with the moment.js and moment-timezone.js libraries.

      $('#counter-timezone-default').countdownCube( {
        target: '{targetDateString}',
        cubeSize: 150,
        background:  'azure',
        color: 'forestgreen',
        } );
    

      $('#counter-timezone-new-york').countdownCube( {
        target: '{targetDateString}',
        targetTimezone: 'America/New_York',
        cubeSize: 150,
        background:  'azure',
        color: 'green',
        } );
    

      $('#counter-timezone-los-angeles').countdownCube( {
        target: '{targetDateString}',
        targetTimezone: 'America/Los_Angeles',
        cubeSize: 150,
        background:  'azure',
        color: 'chartreuse',
        } );
    

UTC

New York

Los Angeles

Example 4

If the built-in Date is used then the local time of the browser is inferred and the timezone argument is effectively ignored, beware that this behavior could be inconsistent across browsers.

      $('#counter-date').countdownCube( {
        target: new Date( '{targetDateOldFormatString}' ),  // local time
        targetTimezone: 'America/Los_Angeles', // ignored
        cubeSize: 150,
        background:  'mistyrose',
        color: 'sienna',
      } );
    

Should be Los Angeles, but it's local time

If you use the legacy Date object, be explicit with timezone in the target string.

Adding a Z at the end means UTC (ISO 8601), otherwise you can specify the offset from UTC using the format ±hh:mm.

      $('#counter-date-utc').countdownCube( {
        target: new Date( '{targetDateStringUTC}' ),  // UTC
        targetTimezone: 'America/Los_Angeles',  // ignored
        cubeSize: 150,
        background:  'mistyrose',
        color: 'saddlebrown',
      } );
    

UTC ({targetDateStringUTC})

UTC ({targetDateStringOffset})

      $('#counter-date-los-angeles').countdownCube( {
        target: new Date( '{targetDateStringOffset}' ),  // offset from UTC
        cubeSize: 150,
        background:  'mistyrose',
        color: 'brown',
      } );
    

Example 5

      $('#counter-end').countdownCube( {
        target: '{nearFutureDateString}',  // now + 10 seconds
        targetTimezone: 'UTC',
        cubeSize: 150,
        background:  'whitesmoke',
        color: 'grey',
        onEnd: function(e) {
          $("#counter-end").text('This is the end!');
        }
      } );
    

Example 6

      $('#counter-end-notrigger').countdownCube( {
        target: '{targetDateStringPast}',
        targetTimezone: 'UTC',
        cubeSize: 150,
        background:  'lightcyan',
        color: 'darkcyan',
        /*
           target is in the past and triggerEnd is false,
           so onEnd is not triggered when the page is loaded
        */
        onEnd: function(e) {
          $("#counter-end-notrigger")
            .text('This was the end, but it was not triggered! ' +
                  '(counter original target: ' +
                  e.options.targetDateObject.toISOString() +
                  ')');
        }
      } );
    

      $('#counter-end-trigger').countdownCube( {
        target: '{targetDateStringPast}',
        targetTimezone: 'UTC',
        cubeSize: 150,
        background:  'lightcyan',
        color: 'cyan',
        onEnd: function(e) {
          $("#counter-end-trigger")
            .text('This was the end and it was triggered! ' +
                  '(counter original target: ' +
                  e.options.targetDateObject.toISOString() +
                  ')');
        },
        triggerEnd: true,
      } );
    

Download the source code here.