Techniques Behind Modern Web
31 Jan
Matt Snider reveals another useful set of JavaScript functions targeting Date manipulation. He follows the same approach to extend String functions.
First, he adds additional functionality to JS native Date object (constants and static methods):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | YAHOO.lang.augmentObject(Date, { /** * Date constant for full month names * * @property MONTHS * @type string */ MONTHS: ['January','February','March','April','May','June','July','August','September','October','November','December'], /** * Returns a date object from the string; expects "MonthName, DayNr Year Hrs:Min:Sec", may not work properly on other strings in all browsers * * @method getDate * @param s {string} the date as a string * @return {date} a date object, defined by the passed string * @static */ getDate: function(s) { var d = new Date(); d.setTime(Date.parse(s)); return d; } }, true); |
Then, he extends Date.prototype using YUI “augmentObject”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | // Extending the Date.prototype Object YAHOO.lang.augmentObject(Date.prototype, { /** * Retrieves the name of the month * * @method getMonthName * @return {string} the month name * @public */ getMonthName: function() { return Date.MONTHS[this.getMonth()]; }, /** * Retrieves the abbreviated name of the month * * @method getMonthNameAbbr * @return {string} the abbreviated month name * @public */ getMonthNameAbbr: function() { return this.getMonthName().substr(0,3); }, /** * Converts the JavaScript Date into a date string. Recognizes the following format characters: y = year, m = month, d = day of month, h = hour, i = minute, s = second * * @method toDateString * @param (string} format OPTIONAL: The string format to convert the JavaScript Date into (ie. ‘m/d/y’ or ‘m. d, y’); default is ‘m/d/y’ * @param {boolean} showZeros OPTIONAL: Forces trailing zeros, so 9/1/2006 becomes 09/01/2006 * @param {Mixed} useMonthName OPTIONAL: string or boolean, use the month name instead of the digit, (’abbr’ uses the short name) * @return {string} the JavaScript Date as a string * @public */ toDateString: function(format, showZeros, useMonthName) { if (! isType(format, ’string’)) {format = ‘m/d/y’;} format = format.toLowerCase(); // cast all values to strings var day = ” + this.getDate(), month = ” + (this.getMonth() + 1), hour = ” + this.getHours(), minute = ” + this.getMinutes(), second = ” + this.getSeconds(), year = ” + this.getFullYear(); // pad leading zeros if (showZeros) { if (1 === day.length) {day = ‘0′ + day;} if (1 === month.length) {month = ‘0′ + month;} if (1 === hour.length) {hour = ‘0′ + hour;} if (1 === minute.length) {minute = ‘0′ + minute;} if (1 === second.length) {second = ‘0′ + second;} } // use month name if (useMonthName) { month = (isType(useMonthName, ’string’) && ‘abbr’ === useMonthName.toLowerCase())? this.getMonthNameAbbr(): this.getMonthName(); } return format.replace(’y', year) .replace(’d', day) .replace(’h', hour) .replace(’i', minute) .replace(’s’, second) .replace(’m', month); // do month last as some months contain reserved letters }, /** * Converts JavaScript Date into a MySQL dateTime string "1969-12-31 00:00:00" * * @method toTimeString * @return {string} the JavaScript Date as a MySQL time string * @public */ toTimeString: function() { return this.toDateString('y-m-d h:i:s', true); } }, true); |
You will find these functions very useful in conjunction with date math static functions in YUI Calendar. Of course, with some small modifications, you can use them in other frameworks too.
Recommended Reading: This site recommends Website Magazine for 'Net Success
Don't forget to subscribe
so you don't miss out on future posts!
One Response for "JavaScript Date Functions"
i need to display date in the format “Tuesday, July 22, 2008 14:07:31 GMT-0700 (PDT)” in firefox and ie but it is displayed as “Tuesday, July 22, 2008 14:07:31 GMT-0700 (Pacific Daylight Time” in firefox
Leave a reply