读书人

JavaScript Date Format (JavaScript

发布时间: 2012-11-08 08:48:12 作者: rapoo

JavaScript Date Format (JavaScript 处理日期 )

?

Although JavaScript provides a bunch of methods for getting and setting parts of a date object, it lacks a simple way to format dates and times according to a user-specified mask. There are a few scripts out there which provide this functionality, but I've never seen one that worked well for me… Most are needlessly bulky or slow, tie in unrelated functionality, use complicated mask syntaxes that more or less require you to read the documentation every time you want to use them, or don't account for special cases like escaping mask characters within the generated string.

When choosing which special mask characters to use for my JavaScript date formatter, I looked at PHP's date function and ColdFusion's discrete dateFormat and timeFormat functions. PHP uses a crazy mix of letters (to me at least, since I'm not a PHP programmer) to represent various date entities, and while I'll probably never memorize the full list, it does offer the advantages that you can apply both date and time formatting with one function, and that none of the special characters overlap (unlike ColdFusion where m and mm mean different things depending on whether you're dealing with dates or times). On the other hand, ColdFusion uses very easy to remember special characters for masks.

With my date formatter, I've tried to take the best features from both, and add some sugar of my own. It did end up a lot like the ColdFusion implementation though, since I've primarily used CF's mask syntax.

Before getting into further details, here are some examples of how this script can be used:

?

核心代码:

?

?

/* * Date Format 1.2.3 * (c) 2007-2009 Steven Levithan <stevenlevithan.com> * MIT license * * Includes enhancements by Scott Trenda <scott.trenda.net> * and Kris Kowal <cixar.com/~kris.kowal/> * * Accepts a date, a mask, or a date and a mask. * Returns a formatted version of the given date. * The date defaults to the current date/time. * The mask defaults to dateFormat.masks.default. */var dateFormat = function () {vartoken = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,timezoneClip = /[^-+\dA-Z]/g,pad = function (val, len) {val = String(val);len = len || 2;while (val.length < len) val = "0" + val;return val;};// Regexes and supporting functions are cached through closurereturn function (date, mask, utc) {var dF = dateFormat;// You can't provide utc if you skip other args (use the "UTC:" mask prefix)if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {mask = date;date = undefined;}// Passing date through Date applies Date.parse, if necessarydate = date ? new Date(date) : new Date;if (isNaN(date)) throw SyntaxError("invalid date");mask = String(dF.masks[mask] || mask || dF.masks["default"]);// Allow setting the utc argument via the maskif (mask.slice(0, 4) == "UTC:") {mask = mask.slice(4);utc = true;}var_ = utc ? "getUTC" : "get",d = date[_ + "Date"](),D = date[_ + "Day"](),m = date[_ + "Month"](),y = date[_ + "FullYear"](),H = date[_ + "Hours"](),M = date[_ + "Minutes"](),s = date[_ + "Seconds"](),L = date[_ + "Milliseconds"](),o = utc ? 0 : date.getTimezoneOffset(),flags = {d:    d,dd:   pad(d),ddd:  dF.i18n.dayNames[D],dddd: dF.i18n.dayNames[D + 7],m:    m + 1,mm:   pad(m + 1),mmm:  dF.i18n.monthNames[m],mmmm: dF.i18n.monthNames[m + 12],yy:   String(y).slice(2),yyyy: y,h:    H % 12 || 12,hh:   pad(H % 12 || 12),H:    H,HH:   pad(H),M:    M,MM:   pad(M),s:    s,ss:   pad(s),l:    pad(L, 3),L:    pad(L > 99 ? Math.round(L / 10) : L),t:    H < 12 ? "a"  : "p",tt:   H < 12 ? "am" : "pm",T:    H < 12 ? "A"  : "P",TT:   H < 12 ? "AM" : "PM",Z:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),S:    ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]};return mask.replace(token, function ($0) {return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);});};}();// Some common format stringsdateFormat.masks = {"default":      "ddd mmm dd yyyy HH:MM:ss",shortDate:      "m/d/yy",mediumDate:     "mmm d, yyyy",longDate:       "mmmm d, yyyy",fullDate:       "dddd, mmmm d, yyyy",shortTime:      "h:MM TT",mediumTime:     "h:MM:ss TT",longTime:       "h:MM:ss TT Z",isoDate:        "yyyy-mm-dd",isoTime:        "HH:MM:ss",isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"};// Internationalization stringsdateFormat.i18n = {dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat","Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec","January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]};// For convenience...Date.prototype.format = function (mask, utc) {return dateFormat(this, mask, utc);};

?

Note that the day and month names can be changed (for internationalization or other purposes) by updating the dateFormat.i18n object.

?

用法实例:

?

?

var now = new Date();now.format("m/dd/yy");// Returns, e.g., 6/09/07// Can also be used as a standalone functiondateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");// Saturday, June 9th, 2007, 5:46:21 PM// You can use one of several named masksnow.format("isoDateTime");// 2007-06-09T17:46:21// ...Or add your owndateFormat.masks.hammerTime = 'HH:MM! "Can\'t touch this!"';now.format("hammerTime");// 17:46! Can't touch this!// When using the standalone dateFormat function,// you can also provide the date as a stringdateFormat("Jun 9 2007", "fullDate");// Saturday, June 9, 2007// Note that if you don't include the mask argument,// dateFormat.masks.default is usednow.format();// Sat Jun 09 2007 17:46:21// And if you don't include the date argument,// the current date and time is useddateFormat();// Sat Jun 09 2007 17:46:22// You can also skip the date argument (as long as your mask doesn't// contain any numbers), in which case the current date/time is useddateFormat("longTime");// 5:46:22 PM EST// And finally, you can convert local time to UTC time. Either pass in// true as an additional argument (no argument skipping allowed in this case):dateFormat(now, "longTime", true);now.format("longTime", true);// Both lines return, e.g., 10:46:21 PM UTC// ...Or add the prefix "UTC:" to your mask.now.format("UTC:h:MM:ss TT Z");// 10:46:21 PM UTC

?

Following are the special characters supported. Any differences in meaning from ColdFusion's dateFormat and timeFormat functions are noted.

?

说明文档:

MaskDescriptiondDay of the month as digits; no leading zero for single-digit days.No equivalent in CF.

And here are the named masks provided by default (you can easily change these or add your own):

NameMaskExampledefaultddd mmm dd yyyy HH:MM:ssSat Jun 09 2007 17:46:21shortDatem/d/yy6/9/07mediumDatemmm d, yyyyJun 9, 2007longDatemmmm d, yyyyJune 9, 2007fullDatedddd, mmmm d, yyyySaturday, June 9, 2007shortTimeh:MM TT5:46 PMmediumTimeh:MM:ss TT5:46:21 PMlongTimeh:MM:ss TT Z5:46:21 PM ESTisoDateyyyy-mm-dd2007-06-09isoTimeHH:MM:ss17:46:21isoDateTimeyyyy-mm-dd'T'HH:MM:ss2007-06-09T17:46:21isoUtcDateTimeUTC:yyyy-mm-dd'T'HH:MM:ss'Z'2007-06-09T22:46:21Z

A couple issues:

In the unlikely event that there is ambiguity in the meaning of your mask (e.g., m followed by mm, with no separating characters), put a pair of empty quotes between your metasequences. The quotes will be removed automatically.If you need to include literal quotes in your mask, the following rules apply:Unpaired quotes do not need special handling.To include literal quotes inside masks which contain any other quote marks of the same type, you need to enclose them with the alternative quote type (i.e., double quotes for single quotes, and vice versa). E.g., date.format('h "o\'clock, y\'all!"') returns "6 o'clock, y'all". This can get a little hairy, perhaps, but I doubt people will really run into it that often. The previous example can also be written as date.format("h") + "o'clock, y'all!".

?

?

?

?来源:http://blog.stevenlevithan.com/archives/date-time-format

?

?

?

?

?

?

?

读书人网 >JavaScript

热点推荐