{"id":503,"date":"2009-08-07T20:13:37","date_gmt":"2009-08-08T01:13:37","guid":{"rendered":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=503"},"modified":"2019-12-10T15:00:13","modified_gmt":"2019-12-10T20:00:13","slug":"6-ways-to-work-with-dates-in-javascript","status":"publish","type":"post","link":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=503","title":{"rendered":"6 Ways To Work With Dates In JavaScript"},"content":{"rendered":"

Yesterday I added another AJAX demonstration to my web site using the Reddit API. http:\/\/www.williamsportwebdeveloper.com\/reddit.html<\/a> The reddit API provides dates in the UTC number format which forced me to spend some time figuring out how to convert it into other date formats. Since I frequently deal with different date formats in JavaScript I decided to do some research on the topic and add a cheatsheet to my notes. I might as well share it with you because I don’t share this kind of knowledge often enough.<\/p>\n

Get Current Date\/Time<\/h1>\n

The first example just shows you how to get the current date and time. Note that this can vary slightly depending upon the browser. Also, it does not factor in your time zone.<\/p>\n

\n
\n
   1:<\/span> function<\/span> fnNow() {<\/pre>\n
   2:<\/span>     var<\/span> now = new<\/span> Date();<\/pre>\n
   3:<\/span>     alert(now);<\/pre>\n
   4:<\/span> }<\/pre>\n<\/div>\n<\/div>\n
Thu Aug 6 22:49:52 EDT 2009 \r\nThu Aug 06 2009 19:43:34 GMT-0400 (Eastern Daylight Time)<\/pre>\n
UTC (Coordinated Universal Time) String<\/h1>\n
This example gets the date and time in a slightly different string format.<\/p>\n
\n
\n
   1:<\/span> function<\/span> fnUTCString() {<\/pre>\n
   2:<\/span>     var<\/span> now = new<\/span> Date();<\/pre>\n
   3:<\/span>     alert(now.toUTCString());<\/pre>\n
   4:<\/span> }<\/pre>\n<\/div>\n<\/div>\n
Thu, 6 Aug 2009 22:49:52 UTC \r\nThu, 06 Aug 2009 23:44:14 GMT<\/pre>\n
UTC (Coordinated Universal Time) Number<\/h1>\n
The UTC() method takes a date and returns the number of milliseconds since midnight of January 1, 1970 according to universal time. 10 to 13 digits, last 3 digits for miliseconds.<\/p>\n
Syntax:<\/b> Date.UTC(year,month,day,hours,minutes,seconds,ms)<\/p>\n
\n
\n
   1:<\/span> function<\/span> fnUTC() {<\/pre>\n
   2:<\/span>     var<\/span> now = new<\/span> Date();<\/pre>\n
   3:<\/span>     var<\/span> d = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());<\/pre>\n
   4:<\/span>     alert(d);<\/pre>\n
   5:<\/span> }<\/pre>\n<\/div>\n<\/div>\n
The example above converts a UTC date in the numerical format, 1249585988774, into the string format. This is what I needed to work with the Reddit API.<\/p>\n
1249585988774<\/pre>\n
ISO 8601<\/h1>\n
ISO 8601<\/strong>. Note that the “T” appears literally in the string, to indicate the beginning of the time element. Times are expressed in UTC (Coordinated Universal Time), with a special UTC designator (“Z”). Used in ATOM RSS feeds.<\/p>\n
\n
\n
   1:<\/span> function<\/span> fnISO() {<\/pre>\n
   2:<\/span>     \/\/ Only works in Firefox using ECMAScript 5<\/span><\/pre>\n
   3:<\/span>     var<\/span> now = new<\/span> Date().toISOString();<\/pre>\n
   4:<\/span>     alert(now);<\/pre>\n
   5:<\/span> }<\/pre>\n<\/div>\n<\/div>\n
As noted in the code comment above, ECMAScript 5 will support the toISOString()<\/em> method. Firefox 3.5 appears to be the only browser with a JavaScript engine that has this method for the Date object. This will make it easier to convert dates into the proper format for RSS feeds.<\/p>\n
2009-08-06T23:36:31.390Z<\/pre>\n
UTC Number To JavaScript Date<\/h1>\n
In the following sample code, I finally factor in my time zone and convert an UTC date in the numerical format into a regular JavaScript Date object.<\/p>\n
\n
\n
   1:<\/span> function<\/span> fnUTC2Date() {<\/pre>\n
   2:<\/span>     var<\/span> now = new<\/span> Date();<\/pre>\n
   3:<\/span>     var<\/span> d = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());<\/pre>\n
   4:<\/span>     \/\/ obtain local UTC offset and convert to msec<\/span><\/pre>\n
   5:<\/span>     localOffset = now.getTimezoneOffset() * 60000;<\/pre>\n
   6:<\/span>     var<\/span> c = new<\/span> Date(d + localOffset);<\/pre>\n
   7:<\/span>     alert(c.toLocaleString());<\/pre>\n
   8:<\/span> }<\/pre>\n<\/div>\n<\/div>\n
JavaScript Date To ISO8601<\/h1>\n
Since the toISOString()<\/em> method is not available for Internet Explorer yet you will need to reformat a date into the ISO 8601 format yourself. The following code is just one way to accomplish this:<\/p>\n
\n
\n
   1:<\/span> function<\/span> padzero(n) {<\/pre>\n
   2:<\/span>     return<\/span> n < 10 ? '0'<\/span> + n : n;<\/pre>\n
   3:<\/span> }<\/pre>\n
   4:<\/span> function<\/span> pad2zeros(n) {<\/pre>\n
   5:<\/span>     if<\/span> (n < 100) {<\/pre>\n
   6:<\/span>         n = '0'<\/span> + n;<\/pre>\n
   7:<\/span>     }<\/pre>\n
   8:<\/span>     if<\/span> (n < 10) {<\/pre>\n
   9:<\/span>         n = '0'<\/span> + n;<\/pre>\n
  10:<\/span>     }<\/pre>\n
  11:<\/span>     return<\/span> n;<\/pre>\n
  12:<\/span> }<\/pre>\n
  13:<\/span> function<\/span> toISOString(d) {<\/pre>\n
  14:<\/span>     return<\/span> d.getUTCFullYear() + '-'<\/span> +  padzero(d.getUTCMonth() + 1) + '-'<\/span> + padzero(d.getUTCDate()) + 'T'<\/span> + padzero(d.getUTCHours()) + ':'<\/span> +  padzero(d.getUTCMinutes()) + ':'<\/span> + padzero(d.getUTCSeconds()) + '.'<\/span> + pad2zeros(d.getUTCMilliseconds()) + 'Z'<\/span>;<\/pre>\n
  15:<\/span> }<\/pre>\n
  16:<\/span> function<\/span> fnToISO() {<\/pre>\n
  17:<\/span>     var<\/span> now = new<\/span> Date();<\/pre>\n
  18:<\/span>     alert(toISOString(now));<\/pre>\n
  19:<\/span> }<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Yesterday I added another AJAX demonstration to my web site using the Reddit API. http:\/\/www.williamsportwebdeveloper.com\/reddit.html The reddit API provides dates in the UTC number format which forced me to spend some time figuring out how to convert it into other … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,112,12],"tags":[365,366,1152,367],"_links":{"self":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/503"}],"collection":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=503"}],"version-history":[{"count":2,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/503\/revisions"}],"predecessor-version":[{"id":3298,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/503\/revisions\/3298"}],"wp:attachment":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=503"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}