arbo77/jqlock-usage.html

## jqlock-usage.html
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>jqlock usage</title>
  <meta name="author" content="arbo77@gmail.com" />
  <script src="jquery-1.7.1.min.js"></script>
  <script src="jqlock.js"></script>
  <script>
    $().ready(function(){
      $("#d1").jqlock({format:"datetime"});
      $("#d2").jqlock({format:"date"});
      $("#d3").jqlock({format:"time"});
    });
  </script>
 </head>

 <body>
    <h1>jqlock usage</h1>
    <div>Datetime : <span id="d1"></span></div>
    <div>Date : <span id="d2"></span></div>
    <div>Time : <span id="d3"></span></div>
 </body>
</html>

## jqlock.js
/**
 *      jqlock.js
 *      ver: 0.1
 *
 *      jQuery plugin to display clock
 *
 *      Copyright 2012 Ari W <arbo77@gmail.com>
 *
 *      This program is free software; you can redistribute it and/or modify
 *      it under the terms of the GNU General Public License as published by
 *      the Free Software Foundation; either version 2 of the License, or
 *      (at your option) any later version.
 *
 *      This program is distributed in the hope that it will be useful,
 *      but WITHOUT ANY WARRANTY; without even the implied warranty of
 *      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *      GNU General Public License for more details.
 *
 *      You should have received a copy of the GNU General Public License
 *      along with this program; if not, write to the Free Software
 *      Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
 *      MA 02110-1301, USA.
 *
 */

(function( $ ) {
  $.fn.jqlock = function(opt) {
    var me = $(this);
    if(!opt){
      var opt = {
        format:"datetime"
      }
    }
    setInterval(function(){
      var d = new Date();
      switch(opt.format){
        case "date":
          me.html(d.getDate() + " " +
                  bulan.full[d.getMonth()] + " " +
                  d.getFullYear());
          break;
        case "datetime":
          me.html(d.getDate() + " " +
                  bulan.full[d.getMonth()] + " " +
                  d.getFullYear() + " " +
                  d.getHours().toString().lpad("0",2) + ":" +
                  d.getMinutes().toString().lpad("0",2) + ":" +
                  d.getSeconds().toString().lpad("0",2));
          break;
        case "time":
          me.html(d.getHours().toString().lpad("0",2) + ":" +
                  d.getMinutes().toString().lpad("0",2) + ":" +
                  d.getSeconds().toString().lpad("0",2));
          break;
      }
      me.html();
    },1000);
  }
})( jQuery );


var bulan = {
  full :["Januari","Februari","Maret","April","Mei","Juni","Juli",
         "Agustus","September","Oktober","Nopember","Desember"],
  short:["Jan","Feb","Mar","Apr","Mei","Jun",
         "Jul","Ags","Sep","Okt","Nop","Des"]
};

String.prototype.lpad = function(padString, length) {
  var str = this;
  while (str.length < length)
    str = padString + str;
  return str;
};
	<!DOCTYPE html PUBLIC
	"-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>jqlock usage</title>
	<meta name="author" content="arbo77@gmail.com" />
	<script src="jquery-1.7.1.min.js"></script>
	<script src="jqlock.js"></script>
	<script>
	$().ready(function(){
	$("#d1").jqlock({format:"datetime"});
	$("#d2").jqlock({format:"date"});
	$("#d3").jqlock({format:"time"});
	});
	</script>
	</head>

	<body>
	<h1>jqlock usage</h1>
	<div>Datetime : <span id="d1"></span></div>
	<div>Date : <span id="d2"></span></div>
	<div>Time : <span id="d3"></span></div>
	</body>
	</html>
	/**
	* jqlock.js
	* ver: 0.1
	*
	* jQuery plugin to display clock
	*
	* Copyright 2012 Ari W <arbo77@gmail.com>
	*
	* This program is free software; you can redistribute it and/or modify
	* it under the terms of the GNU General Public License as published by
	* the Free Software Foundation; either version 2 of the License, or
	* (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU General Public License for more details.
	*
	* You should have received a copy of the GNU General Public License
	* along with this program; if not, write to the Free Software
	* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
	* MA 02110-1301, USA.
	*
	*/

	(function( $ ) {
	$.fn.jqlock = function(opt) {
	var me = $(this);
	if(!opt){
	var opt = {
	format:"datetime"
	}
	}
	setInterval(function(){
	var d = new Date();
	switch(opt.format){
	case "date":
	me.html(d.getDate() + " " +
	bulan.full[d.getMonth()] + " " +
	d.getFullYear());
	break;
	case "datetime":
	me.html(d.getDate() + " " +
	bulan.full[d.getMonth()] + " " +
	d.getFullYear() + " " +
	d.getHours().toString().lpad("0",2) + ":" +
	d.getMinutes().toString().lpad("0",2) + ":" +
	d.getSeconds().toString().lpad("0",2));
	break;
	case "time":
	me.html(d.getHours().toString().lpad("0",2) + ":" +
	d.getMinutes().toString().lpad("0",2) + ":" +
	d.getSeconds().toString().lpad("0",2));
	break;
	}
	me.html();
	},1000);
	}
	})( jQuery );


	var bulan = {
	full :["Januari","Februari","Maret","April","Mei","Juni","Juli",
	"Agustus","September","Oktober","Nopember","Desember"],
	short:["Jan","Feb","Mar","Apr","Mei","Jun",
	"Jul","Ags","Sep","Okt","Nop","Des"]
	};

	String.prototype.lpad = function(padString, length) {
	var str = this;
	while (str.length < length)
	str = padString + str;
	return str;
	};