Javascript

6 Robust Date Manipulation Javascript Plugins

Written by Kevin Liew on 13 Mar 2012
21,976 Views • Shares
2 comments

Introduction

Let's admit it, the built-in Date method in Javascript is really basic. It's not powerful enough to handle date. Well, one can always make their own Javascript Date Manipulation library but why reinvent the wheel when you can easily obtain well-developed and tested javascript date plugin online. I have encountered a few times when I need to manipulate the date format and seriously, this plugin will save us a lot of times.

The following plugins all have many features such as display the date into different format, show relative times (eg, 20 minutes ago), and one of them are good in handling countdown between two dates. Here are 6 of them and I'm pretty sure they will be a good addition to your bookmark.

  • DatejsDatejsComprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn’t just parse strings, it slices them cleanly in two.
    // What date is next thrusday?
    Date.today().next().thursday();
     
    // Add 3 days to Today
    Date.today().add(3).days();
     
    // Is today Friday?
    Date.today().is().friday();
     
    // Number fun
    (3).days().ago();
     
    // 6 months from now
    var n = 6;
    n.months().fromNow();
     
    // Set to 8:30 AM on the 15th day of the month
    Date.today().set({ day: 15, hour: 8, minute: 30 });
     
    // Convert text into Date
    Date.parse('today');
    Date.parse('t + 5 d'); // today + 5 days
    Date.parse('next thursday');
    Date.parse('February 20th 1973');
    Date.parse('Thu, 1 July 2004 22:30:00');
    
  • Pretty DateA simple way to format old JavaScript dates in a "pretty" way. For example "2008-01-28T20:24:17Z" becomes "2 hours ago".
    prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
    prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
    prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
    prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
    prettyDate("2007-12-15T22:24:17Z") // => undefined 
    
  • Moment JSMoment JS
    //Return relative duration, eg 5 months ago
    var halloween = moment([2011, 9, 31]); 
    console.log(halloween.fromNow()); 
    
    // Return current date plus 9
    var now = moment().add('days', 9);
    console.log(now.format('dddd, MMMM Do YYYY'));
    
  • Countdown JSCountdown JSA simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances.
  • XDateXDateXDate is a thin wrapper around JavaScript's native Date object that provides enhanced functionality for parsing, formatting, and manipulating dates. It implements the same methods as the native Date, so it should seem very familiar.
    d = new XDate(2011, 7, 31); // August 31
    d.setMonth(8); // September
    d.toString(); // October 1st!!! because there are only 30 says in September
    
    // let's try this with preventOverflow...
    d = new XDate(2011, 7, 31); // August 31
    d.setMonth(8, true); // September
    d.toString(); // September 30!
    
  • DP Date ExtensionThe DP_DateExtensions library extends the JavaScript Date object with new features and functionality.
    • The addition of feature-rich timeFormat() and dateFormat() methods allowing you detailed control over the display of your date and time values.
    • Easy manipulation of dates via the add() and diff() methods including full understanding of business days.
    • Simplified comparision of dates using the new compare() method.
    • The ability to parse several ISO 8601 standard format dates as described in the Date and Time Formats W3C note.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
Website Design 5 years ago
We really like moment.js! Thanks for the script, made it easy
Reply
laping 4 years ago
goods
Reply