jquery-dateFormat - jQuery Plugin to format Date outputs using JavaScript - Having less than 5kb, jquery-dateFormat is the smallest date format library available!

Installation

Download latest jquery.dateFormat.js or jquery.dateFormat.min.js.

• jquery-dateFormat.js
• jquery-dateFormat.min.js
• dateFormat.js (pure Javascript, no jQuery dependency)
• dateFormat.min.js (pure Javascript, no jQuery dependency)

You can use jquery-dateFormat without jQuery. You just need to import the dateFormat.js above and instead of formatting with $.format(...) you should use DateFormat.format(...).

If you use jQuery Validate plugin you must use jquery-dateFormat without jQuery.

Format patterns

The patterns to formatting are based on java.text.SimpleDateFormat.

Date and time patterns

• yy = short year
• yyyy = long year
• M = month (1-12)
• MM = month (01-12)
• MMM = month abbreviation (Jan, Feb ... Dec)
• MMMM = long month (January, February ... December)
• d = day (1 - 31)
• dd = day (01 - 31)
• ddd = day of the week in words (Monday, Tuesday ... Sunday)
• E = short day of the week in words (Mon, Tue ... Sun)
• D - Ordinal day (1st, 2nd, 3rd, 21st, 22nd, 23rd, 31st, 4th...)
• h = hour in am/pm (0-12)
• hh = hour in am/pm (00-12)
• H = hour in day (0-23)
• HH = hour in day (00-23)
• mm = minute
• ss = second
• SSS = milliseconds
• a = AM/PM marker
• p = a.m./p.m. marker

Expected input dates formats

• 1982-10-15T01:10:20+02:00
• 1982-10-15T01:10:20Z
• Thu Oct 15 01:10:20 CET 1982
• 1982-10-15 01:10:20.546
• Thu Oct 15 1982 01:10:20 GMT-0800 (PST)
• Thu Oct 15 1982 01:10:20 GMT+0800 (China Standard Time)
• Thu Oct 15 1982 01:10:20 GMT+0200 (W. Europe Daylight Time)
• 1982-10-15CET01:10:20
• JavaScript: new Date().getTime()

Some examples.

Usage

 <script>
   document.write($.format.date("2009-12-18 10:54:50.546", "Test: dd/MM/yyyy"));
   document.write($.format.date("Wed Jan 13 10:43:41 CET 2010", "dd~MM~yyyy"));
 </script>

Output

 => Test: 18/12/2009
 => 13~01~2010

Formatting using css classes

  <span class="shortDateFormat">2009-12-18 10:54:50.546</span>
  <span class="longDateFormat">2009-12-18 10:54:50.546</span>

  jQuery(function() {
      var shortDateFormat = 'dd/MM/yyyy';
      var longDateFormat  = 'dd/MM/yyyy HH:mm:ss';

      jQuery(".shortDateFormat").each(function (idx, elem) {
          if (jQuery(elem).is(":input")) {
              jQuery(elem).val(jQuery.format.date(jQuery(elem).val(), shortDateFormat));
          } else {
              jQuery(elem).text(jQuery.format.date(jQuery(elem).text(), shortDateFormat));
          }
      });
      jQuery(".longDateFormat").each(function (idx, elem) {
          if (jQuery(elem).is(":input")) {
              jQuery(elem).val(jQuery.format.date(jQuery(elem).val(), longDateFormat));
          } else {
              jQuery(elem).text(jQuery.format.date(jQuery(elem).text(), longDateFormat));
          }
      });
  });

Output

 => 18/12/2009
 => 18/12/2009 10:54:50

Pretty date formatting

jQuery.format.prettyDate(value) returns a string representing how long ago the date represents

• value = String representing ISO time or date in milliseconds or javascript Date object

 jQuery.format.prettyDate(new Date())             // => "just now"
 jQuery.format.prettyDate(new Date().getTime())   // => "just now"
 jQuery.format.prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
 jQuery.format.prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
 jQuery.format.prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
 jQuery.format.prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
 jQuery.format.prettyDate("2007-12-15T22:24:17Z") // => "more than 5 weeks ago"

toBrowserTimeZone

jQuery.format.toBrowserTimeZone(value, format) converts into browsers timezone.

• value = String representing date in ISO time ("2013-09-14T23:22:33Z") or String representing default JAXB formatting of java.util.Date ("2013-09-14T16:22:33.527-07:00") or String representing Unix Timestamp (Sat Sep 14 2013 16:22:33 GMT-0700 (PDT)) or javascript date object.
• format = All input formats valid for jQuery.format.date are valid for this method. The defaut format is MM/dd/yyyy HH:mm:ss.

Valid input formats

 var date1 = "2013-09-14T23:22:33Z";
 var date2 = "2013-09-14T16:22:33.527-07:00";
 var date3 = "Sat Sep 14 2013 16:22:33 GMT-0700 (PDT)";

 $.format.toBrowserTimeZone(date1)
 $.format.toBrowserTimeZone(date2)
 $.format.toBrowserTimeZone(date3)

Development

To compile jquery-dateFormat (generate dist files):

npm run compile

Testing

Tests are written using Jasmine. To run the test suite with PhantomJS, run npm run test. To run the test suite in your default browser, run npm run test:browser.

Licenses

jquery-dateFormat is released under the MIT License.

Do you want to improve jquery-dateFormat

You're welcome to make your contributions and send them as a pull request.

Contributors

Thanks to all contributors.