Adding advanced formatting to Harshen’s jQuery countdown timer plugin

Harshen’s jQuery countdown timer plugin works great and is simple to use. In a recent project we needed to use special formatting for the countdown timer to be implemented. Although, Harshen’s solution offer to timeSeparator option to specify the separator string to be used this was not flexible enough. The customer wanted the countdown timer to display the remainder time in the format:

dd^d / dd^h / dd^m / dd^s

Although, using the timeSeparator option it is possible to get the separating “/” to work, we needed the days(d), hours(h), minutes(m) and seconds(s) formatted using HTML.

The plugin extension

Having a quick look at the plugin to only thing to do was to overwrite the $this.html() functionality by a custom function that takes care of processing additional formatting rules. In order to keep the formatting as flexible as possible I opted to add regulare expression support through additional options:

1. regexpMatchFormat
2. regexpReplaceWith

regexpMatchFormat specifies the format to match the original output string produced by the plugin. regexpReplaceWith then takes care of replacing the original string with the desired regular expression format. Furthermore, an additional function called html was introduced:

/**
 * Replaces content by optional regular expression specified via options 
 * regexpMatchFormat and regexpReplaceWith.
 * @param Object $this
 * @param String content
 */  
function html($this, content) {
  var processedContent = content;

  if (typeof window['regexpMatchFormat_' + $this.attr('id')] !== 'undefined' &&
      typeof window['regexpReplaceWith_' + $this.attr('id')] !== 'undefined') {
    var regexp = new RegExp(window['regexpMatchFormat_' + $this.attr('id')]);
    processedContent = content.replace(regexp,
      window['regexpReplaceWith_' + $this.attr('id')]);
  }

  $this.html(processedContent);
}

Handling of the addtional two options was added in the countdown function:

var regexpMatchFormat = "";
var regexpReplaceWith = "";
if (options.regexpMatchFormat != undefined && options.regexpReplaceWith != undefined) {
  window['regexpMatchFormat_' + $this.attr('id')] = options.regexpMatchFormat;
  window['regexpReplaceWith_' + $this.attr('id')] = options.regexpReplaceWith;
}

Below you find the regular expression used for this project’s requirements:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function ($) {
    $('#future_date').countdowntimer({
      dateAndTime: "2015/01/01 00:00:00",
      size: "lg",
      regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
      regexpReplaceWith: "$1<sup>d</sup> / $2<sup>h</sup> / $3<sup>m</sup> / $4<sup>s</sup>"
     });
    });
// ]]></script>

Thanks again to Harshen for the very nice plugin 🙂