Customizable jQuery Date/Time Formatting Plugin - jTimer

File Size: 13.6 KB
Views Total: 1192
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable jQuery Date/Time Formatting Plugin - jTimer

jTimer is a customizable, high-performance jQuery date/time formatting plugin that formats dates & times and translates them between other languages.

How to use it:

1. Include the minified version of the jTimer plugin after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jtimer.min.js"></script>

2. The basic usage. DOM is a variable contain the selection of element with jQuery $()

// Default langage is ARABIC
dom.jTimer();   ==> الأحد 24 سبتمبر 2017    
dom.jTimer({ format:"%hh:%mm:%ss" });   ==> 08:56:54 
dom.jTimer({ format:"%d/%m/%y" });   ==> 24/09/2017 
dom.jTimer({ format:"%hh:%mm:%ss %D %d %M %y" });   ==> 08:56:54 الأحد 24 سبتمبر 2017 

// English
dom.jTimer({ format:"%D %d %M %y %hh:%mm:%ss", lang:"en" });   ==> Sunday 24 September 2017 08:56:54 
dom.jTimer({ format:"%DD %d %MM %y %hh:%mm:%ss", lang:"en" });   ==> Sun 24 Sep 2017 08:56:54 

// Use AM/PM
dom.jTimer({ format:"%D %d %M %y %hh:%mm", lang:"en" , ampm:true });   ==> Sunday 24 September 2017 8:56 AM
dom.jTimer({ format:"%DD %d %MM %y %hh:%mm:%ss", lang:"en", ampm:true });   ==> Sun 24 Sep 2017 8:57:24 AM

3. Customize the date output.

dom.jTimer({
format:"%D %d %M %y %hh:%mm", 
change:true, 
monthArray: ["month1", "month2", "month3", "month4", "month5", "month6", "month7", "month8", "month9", "month10", "month11", "month12"],
dayArray: ["day1", "day2", "day3", "day4", "day5", "day6", "day7"]
});   ==>   day1 24 month9 2017 08:58:31 

dom.jTimer({// we can specify the long od short day and week by shift propertie
    format: "%DD %d %MM %y %hh:%mm:%ss",
    change: true,
    monthArray: ["month1", "month2", "month3", "month4", "month5", "month6", "month7", "month8", "month9", "month10", "month11", "month12"],
    dayArray: ["day1", "day2", "day3", "day4", "day5", "day6", "day7"],
    shift:3
});    ==>  day 24 mon 2017 08:58:38 

4. All default options for the plugin.

{

  // custom format
  format: "%D %d %M %y",

  /*
    AR ==> Arabic
    AR-GR ==> Arabic Gregorian
    AR-MG ==> Arabic Maghrebic
    EN ==> English
    FR ==> Francais
    AZ ==> Azérie 
    DE ==> Deutch
    IT ==> Italien
    AF ==> African
    ES ==> Espagnol
    ID ==> Indonesian
    PT ==> Portuguese
  */
  lang: "AR",

  // use AM/PM 
  ampm: false,

  // enable/disable date customization
  change: false,

  // an array of custom month names
  monthArray: [],

  // an array of custom day names
  dayArray: [],

  // shift: 3 = sunday ==> sun, january ==> jan
  shift: 0
  
}

This awesome jQuery plugin is developed by laazebislam. For more Advanced Usages, please check the demo page or visit the official website.