{"id":1845,"date":"2018-04-09T21:03:32","date_gmt":"2018-04-10T02:03:32","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1845"},"modified":"2019-06-10T13:03:42","modified_gmt":"2019-06-10T18:03:42","slug":"javascript-create-formatted-date-time-string","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/04\/09\/javascript-create-formatted-date-time-string\/","title":{"rendered":"JavaScript: How to create a formatted date time string"},"content":{"rendered":"

In JavaScript, to get today’s date and time, all we need to do is use a call to Date()<\/code> For example:<\/p>\n

let today = new Date();<\/pre>\n
This gives us today’s date and the current time, in the form of a Date object that looks like this:<\/p>\n
‘Date’ is the key (left), and the value is an ISO date string (right).<\/p>\n
Date 2018-04-10T01:44:37.812Z<\/pre>\n
In JavaScript dates are typically stored as an ISO date-time string. This has the following format:<\/p>\n
“2017-04-18T<\/mark>05:00:00.000Z<\/mark>“<\/h4>\n
The T in the middle separates the date on the left from the time on the right. The Z at the end is a time zone indicator which means use UTC (Coordinated Universal Time).<\/p>\n
Let’s say we are given an ISO date-time string and we want to output a formatted string for a website, that looks like:<\/p>\n
04\/9\/18 8:00 PM<\/h4>\n
We can do this with the following function:<\/p>\n
const formatDateTime = function (isoDate){\n  \/\/ Function takes in an ISO date of the format \n  \/\/ \"2017-04-18T05:00:00.000Z\" and returns a formatted\n  \/\/ date + time string that looks like this: mm\/dd\/yy hh:mm pm\n  datetime = new Date(isoDate);\n  day = datetime.getDate();\n  month = datetime.getMonth() + 1; \/\/month: 0-11\n  year = datetime.getFullYear();\n  year = year.toString().slice(-2); \/\/ use 2 digit year\n  dateString = month + \"\/\" + day + \"\/\" + year;\n  let options = { hour: 'numeric', minute: 'numeric', hour12: true };\n  let timeString = datetime.toLocaleString('en-US', options);\n  let formattedDateTime = dateString + ' ' + timeString;\n  return formattedDateTime;\n}<\/pre>\n
This function can be called like this:<\/p>\n
let formattedDate = formatDateTime(\"2017-04-18T05:00:00.000Z\");<\/pre>\n
For more information about using the toISOString()<\/code> function, see:
\nhttps:\/\/www.w3schools.com\/jsref\/jsref_toisostring.asp<\/a><\/p>\n
For more information about JavaScript dates and date functions, see:
\nhttps:\/\/www.w3schools.com\/jsref\/jsref_obj_date.asp<\/a>
\nhttps:\/\/www.w3.org\/TR\/NOTE-datetime<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In JavaScript, to get today’s date and time, all we need to do is use a call to Date() For example: let today = new Date(); This gives us today’s date and the current time, in the form of a Date object that looks like this: ‘Date’ is the key (left), and the value is … Continue reading JavaScript: How to create a formatted date time string<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[125,45,126],"class_list":["post-1845","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-date","tag-javascript","tag-toisostring"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1845"}],"version-history":[{"count":7,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1845\/revisions"}],"predecessor-version":[{"id":2761,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1845\/revisions\/2761"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}