{"id":9070,"date":"2023-12-04T12:33:20","date_gmt":"2023-12-04T12:33:20","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9070"},"modified":"2023-12-04T12:33:20","modified_gmt":"2023-12-04T12:33:20","slug":"format-a-date-in-javascript","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/javascript\/format-a-date-in-javascript","title":{"rendered":"How Do I Format a Date in JavaScript?"},"content":{"rendered":"<p>If you want to format dates using built-in methods of javascript then you can use Intl.DateTimeFormat() of javascript.<\/p>\n<p>Here&#8217;s how you can format date to \u2019mm dd, yy\u2019 format using Intl.DateTimeFormat():<\/p>\n<p>Code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">const formatDate = (date) =&gt; {\r\n    const options = {\r\n      year: '2-digit',\r\n      month: 'short',\r\n      day: 'numeric',\r\n    };\r\n \r\n    const formatter = new Intl.DateTimeFormat('en-US', options);\r\n    const parts = formatter.formatToParts(date);\r\n \r\n    \/\/ Extract the formatted parts of date to rearrange them\r\n    const month = parts.find(part =&gt; part.type === 'month').value;\r\n    const day = parts.find(part =&gt; part.type === 'day').value;\r\n    const year = parts.find(part =&gt; part.type === 'year').value;\r\n \r\n    return `${month} ${day}, ${year}`;\r\n}\r\n \r\nconst myDate = new Date(); \/\/ You can replace this with your date\r\nconst formattedDate = formatDate(myDate);\r\nconsole.log(formattedDate);\r\n<\/pre>\n<p>Below are variety of options you can use to format date according to your requirements:<\/p>\n<p>For Year:<\/p>\n<p>&#8216;numeric&#8217;: 2023<br \/>\n&#8216;2-digit&#8217;: 23<\/p>\n<p>For Month:<\/p>\n<p>&#8216;numeric&#8217;: 1, 2, 3, &#8230;<br \/>\n&#8216;2-digit&#8217;: 01, 02, 03, &#8230;<br \/>\n&#8216;narrow&#8217;: J, F, M, &#8230;<br \/>\n&#8216;short&#8217;: Jan, Feb, Mar, &#8230;<br \/>\n&#8216;long&#8217;: January, February, March, &#8230;<\/p>\n<p>For Day:<\/p>\n<p>&#8216;numeric&#8217;: 1, 2, 3, &#8230;<br \/>\n&#8216;2-digit&#8217;: 01, 02, 03, &#8230;<\/p>\n<p>For Weekday:<\/p>\n<p>&#8216;narrow&#8217;: S, M, T, &#8230;<br \/>\n&#8216;short&#8217;: Sun, Mon, Tue, &#8230;<br \/>\n&#8216;long&#8217;: Sunday, Monday, Tuesday, &#8230;<\/p>\n<p>For Hour:<\/p>\n<p>&#8216;numeric&#8217;: 1, 2, 3, &#8230;<br \/>\n&#8216;2-digit&#8217;: 01, 02, 03, &#8230;<\/p>\n<p>For Minute:<\/p>\n<p>&#8216;numeric&#8217;: 0, 1, 2, &#8230;<br \/>\n&#8216;2-digit&#8217;: 00, 01, 02, &#8230;<\/p>\n<p>For Second:<\/p>\n<p>&#8216;numeric&#8217;: 0, 1, 2, &#8230;<br \/>\n&#8216;2-digit&#8217;: 00, 01, 02, &#8230;<\/p>\n<p>You can also use the popular moment.js library to easily format your dates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to format dates using built-in methods of javascript then you can use Intl.DateTimeFormat() of javascript. Here&#8217;s how you can format date to \u2019mm dd, yy\u2019 format using Intl.DateTimeFormat(): Code: const formatDate = (date) =&gt; { const options = { year: &#8216;2-digit&#8217;, month: &#8216;short&#8217;, day: &#8216;numeric&#8217;, }; const formatter = new Intl.DateTimeFormat(&#8216;en-US&#8217;, options); [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9072,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-9070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9070"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9070"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9070\/revisions"}],"predecessor-version":[{"id":9073,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9070\/revisions\/9073"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9072"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}