{"id":9627,"date":"2021-02-16T05:35:05","date_gmt":"2021-02-16T10:35:05","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=9627"},"modified":"2021-12-03T13:41:02","modified_gmt":"2021-12-03T13:41:02","slug":"display-current-month-name-javascript","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/","title":{"rendered":"How to Display the Current Month by Name in JavaScript"},"content":{"rendered":"\n<p>This is how you can get and display the current month by name using the JavaScript <em>toLocaleDateString<\/em> method in your web projects.<\/p>\n\n\n\n<p><a href=\"http:\/\/local.brightwhiz\/tag\/javascript\">JavaScript<\/a> provides a couple of ways to print out the current month by name. We shall show you two ways.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Option 1: Display Current Month by Name From Array<\/h2>\n\n\n\n<p>Here we first create an array with all the month names, then we will use the index as a key to finding the month we want.<\/p>\n\n\n\n<p>Create an array with all the month names, and so use your index as a key to finding the current month as shown here.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">var monthNames = [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;,&quot;June&quot;,&quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;,&quot;December&quot;];<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, we can use the JavaScript <em>Date()<\/em> object to retrieve the current month then use the result as the index of the array as follows.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">var d = new Date();\nconsole.log(&quot;The current month is &quot; + monthNames[d.getMonth()]);<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>The code above outputs the current month. The method above is not very portable and is error-prone as it relies heavily on what you put into the array.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Option 2: Using the Built-In <em>toLocaleDateString<\/em> Method<\/h2>\n\n\n\n<p>The JavaScript <em>toLocaleDateString<\/em> method can be used to show parts of a date in your preferred format. It returns a string with a language-sensitive representation of the date portion of this date.<\/p>\n\n\n\n<p>The new locales and options arguments let applications specify the language whose formatting conventions should be used and allow to customize the behavior of the function. In older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation-dependent.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">var event = new Date();\n\nconsole.log(event.toLocaleDateString(&#039;de-DE&#039;, { month: &#039;long&#039;}));\n\/\/ expected output: Februar\n\nconsole.log(event.toLocaleDateString(&#039;ar-EG&#039;, { month: &#039;long&#039;}));\n\/\/ expected output: \u0641\u0628\u0631\u0627\u064a\u0631\n\nconsole.log(event.toLocaleDateString(&#039;en-US&#039;, { month: &#039;long&#039;}));\n\/\/ expected output: February\n\nconsole.log(event.toLocaleDateString(undefined, { month: &#039;long&#039;}));\n\/\/ expected output: February (varies according to default locale)\n\nconsole.log(event.toLocaleDateString(undefined, { month: &#039;short&#039;}));\n\/\/ expected output: Feb (varies according to default locale)<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>To display a specific month based on a different date you can replace the above and use the <em>UTC()<\/em> method like so:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">event = new Date(Date.UTC(2021, 11, 16, 3, 0, 0));<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Ref: [ <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\/toLocaleDateString\" target=\"_blank\" rel=\"noreferrer noopener\">1<\/a> ]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is how you can get and display the current month by name using the JavaScript toLocaleDateString method in your web projects. JavaScript provides a couple of ways to print&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9628,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,9,27,16],"tags":[212,303,328,523,600,635,638],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display the Current Month by Name in JavaScript<\/title>\n<meta name=\"description\" content=\"This is how you can get and display the current month by name using the JavaScript toLocaleDateString Method in your web projects\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display the Current Month by Name in JavaScript\" \/>\n<meta property=\"og:description\" content=\"This is how you can get and display the current month by name using the JavaScript toLocaleDateString Method in your web projects\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-16T10:35:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-03T13:41:02+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"How to Display the Current Month by Name in JavaScript\",\"datePublished\":\"2021-02-16T10:35:05+00:00\",\"dateModified\":\"2021-12-03T13:41:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/\"},\"wordCount\":273,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg\",\"keywords\":[\"ECMAScript\",\"HTML\",\"JavaScript\",\"Scripting\",\"Ui\/Ux\",\"Web\",\"Web Development\"],\"articleSection\":[\"Articles\",\"Guides\",\"How To\",\"Programming\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/\",\"url\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/\",\"name\":\"How to Display the Current Month by Name in JavaScript\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg\",\"datePublished\":\"2021-02-16T10:35:05+00:00\",\"dateModified\":\"2021-12-03T13:41:02+00:00\",\"description\":\"This is how you can get and display the current month by name using the JavaScript toLocaleDateString Method in your web projects\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Current Month by Name in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Display the Current Month by Name in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/x.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Display the Current Month by Name in JavaScript","description":"This is how you can get and display the current month by name using the JavaScript toLocaleDateString Method in your web projects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Display the Current Month by Name in JavaScript","og_description":"This is how you can get and display the current month by name using the JavaScript toLocaleDateString Method in your web projects","og_url":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2021-02-16T10:35:05+00:00","article_modified_time":"2021-12-03T13:41:02+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"How to Display the Current Month by Name in JavaScript","datePublished":"2021-02-16T10:35:05+00:00","dateModified":"2021-12-03T13:41:02+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/"},"wordCount":273,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg","keywords":["ECMAScript","HTML","JavaScript","Scripting","Ui\/Ux","Web","Web Development"],"articleSection":["Articles","Guides","How To","Programming","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/","url":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/","name":"How to Display the Current Month by Name in JavaScript","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg","datePublished":"2021-02-16T10:35:05+00:00","dateModified":"2021-12-03T13:41:02+00:00","description":"This is how you can get and display the current month by name using the JavaScript toLocaleDateString Method in your web projects","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/display-current-month-name-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/02\/current-month-javascript.jpg","width":1200,"height":630,"caption":"Current Month by Name in JavaScript"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/display-current-month-name-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"How to Display the Current Month by Name in JavaScript"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/x.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/9627"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=9627"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/9627\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/9628"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=9627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=9627"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=9627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}