[{"data":1,"prerenderedAt":562},["ShallowReactive",2],{"blog-article-/blog/date-formatting":3,"blog-surround-/blog/date-formatting":553},{"id":4,"title":5,"body":6,"canonical":538,"date":539,"description":540,"extension":541,"featured":542,"image":543,"meta":544,"navigation":545,"ogImage":538,"path":546,"provider":547,"published":542,"seo":548,"stem":549,"tags":550,"url":538,"__hash__":552},"blog/blog/date-formatting.md","Formatting a date in JavaScript",{"type":7,"value":8,"toc":533},"minimark",[9,18,28,171,176,179,217,224,227,294,299,303,306,363,368,425,430,433,494,499,503,529],[10,11,12,13,17],"p",{},"When it comes to dates we often add big libraries like Moment.js or Luxon just to format a simple date. But it is actually much simpler than that by using the ",[14,15,16],"code",{},"toLocalDateString()"," method. We don't have to install any packages. It just works",[10,19,20,21,24,25,27],{},"In the example below we are using vue so therefore we create a method called ",[14,22,23],{},"formatDate()"," and pass in the date that we want to format. We then set our options of how we want the date to be shown. This is an object where we can choose if we want the month to be numeric or long for example. We then return the new date passing in our date we want formatted. We then chain our ",[14,26,16],{}," method passing in the language we want to use followed by the options.",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-jsx shiki shiki-themes github-light github-dark","\u003Cscript>\nexport default {\n  methods: {\n    formatDate(date) {\n      const options = { year: 'numeric', month: 'long', day: 'numeric' }\n      return new Date(date).toLocaleDateString('en', options)\n    },\n  }\n};\n\u003C/script>\n\n","jsx","",[14,36,37,53,59,65,82,117,143,149,155,161],{"__ignoreMap":34},[38,39,42,46,50],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"sVt8B","\u003C",[38,47,49],{"class":48},"s9eBZ","script",[38,51,52],{"class":44},">\n",[38,54,56],{"class":40,"line":55},2,[38,57,58],{"class":44},"export default {\n",[38,60,62],{"class":40,"line":61},3,[38,63,64],{"class":44},"  methods: {\n",[38,66,68,72,75,79],{"class":40,"line":67},4,[38,69,71],{"class":70},"sScJk","    formatDate",[38,73,74],{"class":44},"(",[38,76,78],{"class":77},"s4XuR","date",[38,80,81],{"class":44},") {\n",[38,83,85,89,93,96,99,103,106,109,112,114],{"class":40,"line":84},5,[38,86,88],{"class":87},"szBVR","      const",[38,90,92],{"class":91},"sj4cs"," options",[38,94,95],{"class":87}," =",[38,97,98],{"class":44}," { year: ",[38,100,102],{"class":101},"sZZnC","'numeric'",[38,104,105],{"class":44},", month: ",[38,107,108],{"class":101},"'long'",[38,110,111],{"class":44},", day: ",[38,113,102],{"class":101},[38,115,116],{"class":44}," }\n",[38,118,120,123,126,129,132,135,137,140],{"class":40,"line":119},6,[38,121,122],{"class":87},"      return",[38,124,125],{"class":87}," new",[38,127,128],{"class":70}," Date",[38,130,131],{"class":44},"(date).",[38,133,134],{"class":70},"toLocaleDateString",[38,136,74],{"class":44},[38,138,139],{"class":101},"'en'",[38,141,142],{"class":44},", options)\n",[38,144,146],{"class":40,"line":145},7,[38,147,148],{"class":44},"    },\n",[38,150,152],{"class":40,"line":151},8,[38,153,154],{"class":44},"  }\n",[38,156,158],{"class":40,"line":157},9,[38,159,160],{"class":44},"};\n",[38,162,164,167,169],{"class":40,"line":163},10,[38,165,166],{"class":44},"\u003C/",[38,168,49],{"class":48},[38,170,52],{"class":44},[172,173,175],"h2",{"id":174},"different-options","Different Options",[10,177,178],{},"We can then use our method like we would use any Vue method in our template passing in the date want formatted",[29,180,184],{"className":181,"code":182,"language":183,"meta":34,"style":34},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cp> {{ formatDate('2020-12-25') }} \u003C/p>\n\u003C/template>\n","html",[14,185,186,195,209],{"__ignoreMap":34},[38,187,188,190,193],{"class":40,"line":41},[38,189,45],{"class":44},[38,191,192],{"class":48},"template",[38,194,52],{"class":44},[38,196,197,200,202,205,207],{"class":40,"line":55},[38,198,199],{"class":44},"  \u003C",[38,201,10],{"class":48},[38,203,204],{"class":44},"> {{ formatDate('2020-12-25') }} \u003C/",[38,206,10],{"class":48},[38,208,52],{"class":44},[38,210,211,213,215],{"class":40,"line":61},[38,212,166],{"class":44},[38,214,192],{"class":48},[38,216,52],{"class":44},[10,218,219,220],{},"Result: ",[221,222,223],"strong",{},"December 25, 2021",[10,225,226],{},"We can also use different options. Perhaps we want to show the day of the week. We can do this by adding in the weekday.",[29,228,230],{"className":31,"code":229,"language":33,"meta":34,"style":34},"formatDateDay(date) {\n  const options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }\n  return new Date(date).toLocaleDateString('en-us', options)\n},\n",[14,231,232,240,269,289],{"__ignoreMap":34},[38,233,234,237],{"class":40,"line":41},[38,235,236],{"class":70},"formatDateDay",[38,238,239],{"class":44},"(date) {\n",[38,241,242,245,247,249,252,254,257,259,261,263,265,267],{"class":40,"line":55},[38,243,244],{"class":87},"  const",[38,246,92],{"class":91},[38,248,95],{"class":87},[38,250,251],{"class":44}," {  weekday: ",[38,253,108],{"class":101},[38,255,256],{"class":44},", year: ",[38,258,102],{"class":101},[38,260,105],{"class":44},[38,262,108],{"class":101},[38,264,111],{"class":44},[38,266,102],{"class":101},[38,268,116],{"class":44},[38,270,271,274,276,278,280,282,284,287],{"class":40,"line":61},[38,272,273],{"class":87},"  return",[38,275,125],{"class":87},[38,277,128],{"class":70},[38,279,131],{"class":44},[38,281,134],{"class":70},[38,283,74],{"class":44},[38,285,286],{"class":101},"'en-us'",[38,288,142],{"class":44},[38,290,291],{"class":40,"line":67},[38,292,293],{"class":44},"},\n",[10,295,219,296],{},[221,297,298],{},"Friday, October 9, 2020",[172,300,302],{"id":301},"different-locales","Different Locales",[10,304,305],{},"And we can also pass in different locales so we get the date in the right order which is especially useful for when working with UK v US date formatting.",[29,307,309],{"className":31,"code":308,"language":33,"meta":34,"style":34},"formatDateEN(date) {\n  const options = { year: 'numeric', month: 'numeric', day: 'numeric' }\n  return new Date(date).toLocaleDateString('en-GB', options)\n},\n",[14,310,311,318,340,359],{"__ignoreMap":34},[38,312,313,316],{"class":40,"line":41},[38,314,315],{"class":70},"formatDateEN",[38,317,239],{"class":44},[38,319,320,322,324,326,328,330,332,334,336,338],{"class":40,"line":55},[38,321,244],{"class":87},[38,323,92],{"class":91},[38,325,95],{"class":87},[38,327,98],{"class":44},[38,329,102],{"class":101},[38,331,105],{"class":44},[38,333,102],{"class":101},[38,335,111],{"class":44},[38,337,102],{"class":101},[38,339,116],{"class":44},[38,341,342,344,346,348,350,352,354,357],{"class":40,"line":61},[38,343,273],{"class":87},[38,345,125],{"class":87},[38,347,128],{"class":70},[38,349,131],{"class":44},[38,351,134],{"class":70},[38,353,74],{"class":44},[38,355,356],{"class":101},"'en-GB'",[38,358,142],{"class":44},[38,360,361],{"class":40,"line":67},[38,362,293],{"class":44},[10,364,219,365],{},[221,366,367],{},"25/12/2020",[29,369,371],{"className":31,"code":370,"language":33,"meta":34,"style":34},"formatDateUS(date) {\n  const options = { year: 'numeric', month: 'numeric', day: 'numeric' }\n  return new Date(date).toLocaleDateString('en-US', options)\n},\n",[14,372,373,380,402,421],{"__ignoreMap":34},[38,374,375,378],{"class":40,"line":41},[38,376,377],{"class":70},"formatDateUS",[38,379,239],{"class":44},[38,381,382,384,386,388,390,392,394,396,398,400],{"class":40,"line":55},[38,383,244],{"class":87},[38,385,92],{"class":91},[38,387,95],{"class":87},[38,389,98],{"class":44},[38,391,102],{"class":101},[38,393,105],{"class":44},[38,395,102],{"class":101},[38,397,111],{"class":44},[38,399,102],{"class":101},[38,401,116],{"class":44},[38,403,404,406,408,410,412,414,416,419],{"class":40,"line":61},[38,405,273],{"class":87},[38,407,125],{"class":87},[38,409,128],{"class":70},[38,411,131],{"class":44},[38,413,134],{"class":70},[38,415,74],{"class":44},[38,417,418],{"class":101},"'en-US'",[38,420,142],{"class":44},[38,422,423],{"class":40,"line":67},[38,424,293],{"class":44},[10,426,219,427],{},[221,428,429],{},"12/25/2020",[10,431,432],{},"And of course we can also change the format to show the day and month in a different language.",[29,434,436],{"className":31,"code":435,"language":33,"meta":34,"style":34},"formatDateDayEs(date) {\n  const options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }\n  return new Date(date).toLocaleDateString('es', options)\n},\n",[14,437,438,445,471,490],{"__ignoreMap":34},[38,439,440,443],{"class":40,"line":41},[38,441,442],{"class":70},"formatDateDayEs",[38,444,239],{"class":44},[38,446,447,449,451,453,455,457,459,461,463,465,467,469],{"class":40,"line":55},[38,448,244],{"class":87},[38,450,92],{"class":91},[38,452,95],{"class":87},[38,454,251],{"class":44},[38,456,108],{"class":101},[38,458,256],{"class":44},[38,460,102],{"class":101},[38,462,105],{"class":44},[38,464,108],{"class":101},[38,466,111],{"class":44},[38,468,102],{"class":101},[38,470,116],{"class":44},[38,472,473,475,477,479,481,483,485,488],{"class":40,"line":61},[38,474,273],{"class":87},[38,476,125],{"class":87},[38,478,128],{"class":70},[38,480,131],{"class":44},[38,482,134],{"class":70},[38,484,74],{"class":44},[38,486,487],{"class":101},"'es'",[38,489,142],{"class":44},[38,491,492],{"class":40,"line":67},[38,493,293],{"class":44},[10,495,219,496],{},[221,497,498],{},"viernes, 25 de diciembre de 2020",[172,500,502],{"id":501},"example","Example",[504,505,506,519],"ul",{},[507,508,509,518],"li",{},[221,510,511],{},[512,513,517],"a",{"href":514,"rel":515},"https://codepen.io/debs-obrien/pen/oNLgJda",[516],"nofollow","See my CodePen"," to play around with the dates.",[507,520,521,528],{},[221,522,523],{},[512,524,527],{"href":525,"rel":526},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString",[516],"See the Mozilla Docs"," for more info.",[530,531,532],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":34,"searchDepth":55,"depth":55,"links":534},[535,536,537],{"id":174,"depth":55,"text":175},{"id":301,"depth":55,"text":302},{"id":501,"depth":55,"text":502},null,"2020-10-09","How to format a date in JavaScript without using any libraries so you easily display dates in your Vue or Nuxt application","md",false,"photo-1595437037073-edcf5af767dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop",{},true,"/blog/date-formatting","imgix",{"title":5,"description":540},"blog/date-formatting",[551],"javascript","mVH_xObi2-wW6Eyv2gilJ8PEiksbjfHgV0wVwdYgwn0",[554,558],{"title":555,"path":556,"stem":557,"children":-1},"Vue Directives","/blog/vue-directives","blog/vue-directives",{"title":559,"path":560,"stem":561,"children":-1},"Advanced i18n in Nuxt using Interpolations","/blog/advanced-i18n-in-nuxt-using-interpolations","blog/advanced-i18n-in-nuxt-using-interpolations",1790839749040]