CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 5.12.9"/><meta name="theme-color" content="#663399"/><meta data-react-helmet="true" name="description" content="By parsing and formatting dates in JavaScript, you can ensure that your apps handle dates consistently and accurately, regardless of where the date comes from or how it is displayed."/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" name="twitter:creator" content="bybydev"/><style data-href="/styles.b997a12dc58b04501780.css" data-identity="gatsby-global-css">:root{--prism-scheme:light;--prism-foreground:#6e6e6e;--prism-background:#f4f4f4;--prism-comment:#a8a8a8;--prism-string:#555;--prism-literal:#333;--prism-keyword:#000;--prism-function:#4f4f4f;--prism-deleted:#333;--prism-class:#333;--prism-builtin:#757575;--prism-property:#333;--prism-namespace:#4f4f4f;--prism-punctuation:#ababab;--prism-decorator:var(--prism-class);--prism-operator:var(--prism-punctuation);--prism-number:var(--prism-literal);--prism-boolean:var(--prism-literal);--prism-variable:var(--prism-literal);--prism-constant:var(--prism-literal);--prism-symbol:var(--prism-literal);--prism-interpolation:var(--prism-literal);--prism-selector:var(--prism-keyword);--prism-keyword-control:var(--prism-keyword);--prism-regex:var(--prism-string);--prism-json-property:var(--prism-property);--prism-inline-background:var(--prism-background);--prism-comment-style:italic;--prism-url-decoration:underline;--prism-line-number:#a5a5a5;--prism-line-number-gutter:#333;--prism-line-highlight-background:#eee;--prism-selection-background:#ddd;--prism-marker-color:var(--prism-foreground);--prism-marker-opacity:0.4;--prism-marker-font-size:0.8em;--prism-font-size:1em;--prism-line-height:1.5em;--prism-font-family:monospace;--prism-inline-font-size:var(--prism-font-size);--prism-block-font-size:var(--prism-font-size);--prism-tab-size:2;--prism-block-padding-x:1em;--prism-block-padding-y:1em;--prism-block-margin-x:0;--prism-block-margin-y:0.5em;--prism-block-radius:0.3em;--prism-inline-padding-x:0.3em;--prism-inline-padding-y:0.1em;--prism-inline-radius:0.3em}code[class*=language-],div[class*=language-],pre[class*=language-]{color:var(--prism-foreground)!important;direction:ltr;font-family:var(--prism-font-family);font-size:var(--prism-font-size);-webkit-hyphens:none;hyphens:none;line-height:var(--prism-line-height);tab-size:var(--prism-tab-size);text-align:left;white-space:pre;word-break:normal;word-spacing:normal}div[class*=language-],pre[class*=language-]{background:var(--prism-background);border-radius:var(--prism-block-radius);font-size:var(--prism-block-font-size);margin:var(--prism-block-margin-y) var(--prism-block-margin-x);overflow:auto;padding:var(--prism-block-padding-y) var(--prism-block-padding-x)}:not(pre)>code[class*=language-]{background:var(--prism-inline-background);border-radius:var(--prism-inline-radius);font-size:var(--prism-inline-font-size);padding:var(--prism-inline-padding-y) var(--prism-inline-padding-x)}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:var(--prism-selection-background)}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--prism-comment);font-style:var(--prism-comment-style)}.token.namespace{color:var(--prism-namespace)}.token.interpolation{color:var(--prism-interpolation)}.token.string{color:var(--prism-string)}.token.punctuation{color:var(--prism-punctuation)}.token.operator{color:var(--prism-operator)}.token.keyword.control-flow,.token.keyword.module{color:var(--prism-keyword-control)}.token.inserted,.token.symbol,.token.url{color:var(--prism-symbol)}.token.constant{color:var(--prism-constant)}.token.string.url{-webkit-text-decoration:var(--prism-url-decoration);text-decoration:var(--prism-url-decoration)}.language-json .token.boolean,.token.boolean{color:var(--prism-boolean)}.language-json .token.number,.token.number{color:var(--prism-number)}.token.variable{color:var(--prism-variable)}.token.keyword{color:var(--prism-keyword)}.token.atrule,.token.attr-value,.token.selector{color:var(--prism-selector)}.token.function{color:var(--prism-function)}.token.deleted{color:var(--prism-deleted)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.class-name{color:var(--prism-class)}.token.builtin,.token.tag{color:var(--prism-builtin)}.token.attr-name,.token.entity,.token.property{color:var(--prism-property)}.language-json .token.property{color:var(--prism-json-property)}.token.regex{color:var(--prism-regex)}.token.annotation,.token.decorator{color:var(--prism-decorator)}.line-numbers .line-numbers-rows{border-right-color:var(--prism-line-number)}.line-numbers-rows>span:before{color:var(--prism-line-number-gutter)}.line-highlight{background:var(--prism-line-highlight-background)}:root{--font-normal:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-code:Menlo,Monaco,source-code-pro,monospace;--sidebar-border-radius:6px;--prism-font-family:var(--font-code);--prism-font-size:13.5px;--prism-block-margin-y:1.5em;--prism-inline-font-size:0.9em;--prism-inline-padding-x:4px;--prism-inline-padding-y:0px;--prism-inline-radius:4px;--prism-block-radius:6px}*,:after,:before{box-sizing:border-box}html{font-family:var(--font-normal);font-size:16px;font-weight:400}body{--color-primary:#a6d1e6;--color-secondary:#ff898e;--color-accent:#8d4ca8;--bg-hr:rgba(84,84,84,.48);--bg-header:rgba(0,0,0,.3);--bg-body:#222;--bg-inline-color:#c9def1;--bg-inline-code:hsla(0,0%,100%,.05);--bg-code-block:#2b2b2b;--bg-overlay:#2b2b2b;--bg-sidebar:#1f1f1f;--bg-sidebar-overlay:#262626;--bg-footer:rgba(0,0,0,.3);--text-primary:#fff;--text-secondary:#eee;--text-normal:hsla(0,0%,100%,.85);--text-alt:#9ca3af;--prism-scheme:dark;--prism-foreground:#d4cfbf;--prism-background:#1e1e1e;--prism-comment:#758575;--prism-string:#d48372;--prism-literal:#429988;--prism-keyword:#4d9375;--prism-function:#a1b567;--prism-deleted:#a14f55;--prism-class:#54b1bf;--prism-builtin:#e0a569;--prism-property:#dd8e6e;--prism-namespace:#db889a;--prism-punctuation:#858585;--prism-decorator:#bd8f8f;--prism-operator:var(--prism-punctuation);--prism-number:#6394bf;--prism-boolean:#1c6b48;--prism-variable:#c2b36e;--prism-constant:var(--prism-literal);--prism-symbol:var(--prism-literal);--prism-interpolation:var(--prism-literal);--prism-selector:var(--prism-keyword);--prism-keyword-control:var(--prism-keyword);--prism-regex:#ab5e3f;--prism-json-property:#6b8b9e;--prism-comment-style:italic;--prism-url-decoration:underline;--prism-line-number:#888;--prism-line-number-gutter:#eee;--prism-line-highlight-background:#444;--prism-selection-background:#444;--prism-marker-color:var(--prism-foreground);--prism-marker-opacity:0.4;--prism-marker-font-size:0.8em;--prism-line-height:1.5em;--prism-block-font-size:var(--prism-font-size);--prism-tab-size:2;--prism-block-padding-x:1em;--prism-block-padding-y:1em;--prism-block-margin-x:0;--prism-inline-background:hsla(0,0%,100%,.05);background-color:var(--bg-body);color:var(--text-normal);margin:0}h1{color:var(--text-primary);font-weight:900}h2,h3,h4,h5,h6{color:var(--text-secondary)}h4{letter-spacing:.140625em;text-transform:uppercase}h6{font-style:italic}a{box-shadow:none;color:var(--color-primary);text-decoration:none}a:hover{color:var(--color-secondary)}a:active,a:hover{box-shadow:none}p{font-size:1rem;line-height:1.75;margin:0}#carbonads_1{display:none}#carbonads *{line-height:normal;margin:initial;padding:initial}#carbonads{--carbon-font-family:var(--font-normal);--carbon-font-size:14px;--carbon-padding:1.5ch;--carbon-max-char:20ch;--carbon-bg-primary:var(--bg-sidebar);--carbon-bg-secondary:var(--bg-sidebar-overlay);--carbon-text-color:var(--text-secondary);font-family:var(--carbon-font-family);font-size:var(--carbon-font-size);z-index:10}#carbonads>span{background-color:var(--carbon-bg-primary);border-radius:6px;display:flex;flex-direction:column;gap:var(--carbon-padding);max-inline-size:calc(130px + var(--carbon-max-char) + 8ch);min-inline-size:130px;padding:var(--carbon-padding)}#carbonads a{text-decoration:none}#carbonads a,#carbonads a:hover{color:var(--carbon-text-color)}#carbonads .carbon-wrap{display:flex;flex-wrap:wrap;gap:1.5ex}#carbonads .carbon-img{flex:0 0 130px}#carbonads .carbon-img img{display:block}#carbonads .carbon-text{flex-basis:var(--carbon-max-char);flex-grow:1;line-height:1.4;text-align:left}#carbonads .carbon-poweredby{background:var(--carbon-bg-secondary);color:var(--carbon-text-color);font-size:.6em;font-weight:600;letter-spacing:.2ch;line-height:1.4;padding:6px 8px;text-align:center;text-transform:uppercase}.react-tabs__tab-list{border-bottom:1px solid var(--bg-hr);margin:0 0 2rem;padding:0}.react-tabs__tab{border:1px solid transparent;border-bottom:none;bottom:-1px;cursor:pointer;display:inline-block;list-style:none;padding:6px 12px;position:relative}.react-tabs__tab--selected{background:var(--bg-body);border-color:var(--bg-hr);border-radius:5px 5px 0 0;color:var(--text-primary)}.react-tabs__tab-panel{display:none}.react-tabs__tab-panel--selected{display:block}</style><style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper picture.object-fit-polyfill{position:static!important}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style><noscript><style>.gatsby-image-wrapper noscript [data-main-image]{opacity:1!important}.gatsby-image-wrapper [data-placeholder-image]{opacity:0!important}</style></noscript><script type="module">const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){const t=e.target;if(void 0===t.dataset.mainImage)return;if(void 0===t.dataset.gatsbyImageSsr)return;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);</script><link rel="preconnect" href="https://www.googletagmanager.com"/><link rel="dns-prefetch" href="https://www.googletagmanager.com"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-T0GLEQLJVB"></script><script> if(true) { window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-T0GLEQLJVB', {"send_page_view":false}); } </script><link rel="icon" href="/favicon-32x32.png?v=b337c5db7e56e1f1cd6ebe8762c5bb90" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><title data-react-helmet="true">How to parse and format a date in JavaScript</title><link data-react-helmet="true" rel="canonical" href="https://byby.dev/js-format-date"/><style data-styled="" data-styled-version="6.0.2">.bKcUHV{background-color:var(--bg-header);}/*!sc*/ data-styled.g1[id="sc-18i19tb-0"]{content:"bKcUHV,"}/*!sc*/ .bbTXGV{display:flex;align-items:center;justify-content:space-between;width:1024px;margin:0.7rem auto;}/*!sc*/ @media (max-width: 1024px) and (min-width: 700px){.bbTXGV{width:auto;margin:0.7rem 2rem;}}/*!sc*/ @media (max-width: 700px){.bbTXGV{width:auto;margin:0.7rem 1rem;}}/*!sc*/ data-styled.g2[id="sc-18i19tb-1"]{content:"bbTXGV,"}/*!sc*/ .jBDEON{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;}/*!sc*/ data-styled.g3[id="sc-18i19tb-2"]{content:"jBDEON,"}/*!sc*/ .blKEdP{font-size:1rem;font-weight:400;color:var(--text-secondary);margin-left:0.6rem;line-height:0.9;}/*!sc*/ data-styled.g4[id="sc-18i19tb-3"]{content:"blKEdP,"}/*!sc*/ .jxNdqP{display:flex;flex-direction:row;align-items:center;box-shadow:none;color:var(--text-primary);text-decoration:none;font-weight:700;font-size:0.8rem;}/*!sc*/ data-styled.g5[id="sc-18i19tb-4"]{content:"jxNdqP,"}/*!sc*/ .dPDXpA{display:flex;flex-direction:column;background-color:var(--bg-footer);}/*!sc*/ data-styled.g6[id="sc-w2x1zc-0"]{content:"dPDXpA,"}/*!sc*/ .gvSyvW{width:1024px;margin:0px auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:1rem 0;}/*!sc*/ @media (max-width: 1024px) and (min-width: 700px){.gvSyvW{width:auto;margin:0px 2rem;}}/*!sc*/ @media (max-width: 700px){.gvSyvW{width:auto;margin:0px 1rem;flex-direction:column;justify-content:flex-start;}}/*!sc*/ data-styled.g7[id="sc-w2x1zc-1"]{content:"gvSyvW,"}/*!sc*/ .enoQsv{font-size:0.85rem;font-weight:500;color:inherit;margin:0;text-transform:uppercase;}/*!sc*/ @media (max-width: 700px){.enoQsv{text-align:center;margin-bottom:8px;}}/*!sc*/ data-styled.g8[id="sc-w2x1zc-2"]{content:"enoQsv,"}/*!sc*/ .jgZslX{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;}/*!sc*/ data-styled.g9[id="sc-w2x1zc-3"]{content:"jgZslX,"}/*!sc*/ .jgUudb{font-size:1rem;color:inherit;box-shadow:none;text-decoration:none;margin-left:8px;}/*!sc*/ data-styled.g10[id="sc-w2x1zc-4"]{content:"jgUudb,"}/*!sc*/ .kvNARb{display:flex;flex-direction:column;align-items:flex-start;padding-left:1rem;margin-bottom:2rem;}/*!sc*/ @media (max-width: 700px){.kvNARb{padding-left:0;border-left:none;}}/*!sc*/ data-styled.g11[id="sc-1e3eom7-0"]{content:"kvNARb,"}/*!sc*/ .gEBfnb{color:var(--text-alt);font-weight:800;font-size:13px;margin-top:0;margin-bottom:12px;text-transform:uppercase;}/*!sc*/ data-styled.g12[id="sc-1e3eom7-1"]{content:"gEBfnb,"}/*!sc*/ .hIiPRt{font-size:14px;font-weight:400;color:var(--text-secondary);margin-bottom:8px;line-height:1.5;}/*!sc*/ @media (max-width: 700px){.hIiPRt{font-size:1rem;}}/*!sc*/ data-styled.g13[id="sc-1e3eom7-2"]{content:"hIiPRt,"}/*!sc*/ .klXVYf{display:flex;flex-direction:column;align-items:flex-start;padding-left:1rem;}/*!sc*/ @media (max-width: 700px){.klXVYf{padding-left:0;border-left:none;}}/*!sc*/ data-styled.g14[id="sc-1h580ev-0"]{content:"klXVYf,"}/*!sc*/ .hnVNEu{width:100%;object-fit:cover;border-radius:6px;margin-bottom:4px;}/*!sc*/ data-styled.g15[id="sc-1h580ev-1"]{content:"hnVNEu,"}/*!sc*/ .lgEguI{font-size:0.9rem;line-height:1.3;}/*!sc*/ data-styled.g16[id="sc-1h580ev-2"]{content:"lgEguI,"}/*!sc*/ .dZlVJz{display:flex;flex-direction:column;align-items:stretch;width:320px;margin-left:2rem;flex-grow:0;flex-shrink:0;}/*!sc*/ @media (max-width: 1024px) and (min-width: 700px){.dZlVJz{width:250px;margin-left:2rem;}}/*!sc*/ @media (max-width: 700px){.dZlVJz{width:100%;margin:3rem 0 0;border-left:none;}}/*!sc*/ data-styled.g17[id="sc-byfmz-0"]{content:"dZlVJz,"}/*!sc*/ .khGmUV{border-radius:var(--sidebar-border-radius);padding:1rem;margin-bottom:0.5rem;background-color:var(--bg-sidebar);display:none;}/*!sc*/ data-styled.g18[id="sc-byfmz-1"]{content:"khGmUV,"}/*!sc*/ .cJWZkZ{border-radius:var(--sidebar-border-radius);padding:1rem 1rem 0.1rem;margin-bottom:0.5rem;background-color:var(--bg-sidebar);}/*!sc*/ data-styled.g19[id="sc-byfmz-2"]{content:"cJWZkZ,"}/*!sc*/ .ieOLZz{display:flex;flex-direction:column;align-items:stretch;min-height:100vh;width:100vw;}/*!sc*/ data-styled.g20[id="sc-ict75e-0"]{content:"ieOLZz,"}/*!sc*/ .szLJS{width:1024px;display:flex;flex-direction:row;flex-grow:1;margin:0 auto;padding:3rem 0;align-items:flex-start;}/*!sc*/ @media (max-width: 1024px) and (min-width: 700px){.szLJS{padding:2rem;width:100%;}}/*!sc*/ @media (max-width: 700px){.szLJS{padding:2rem 1rem;flex-direction:column;width:100%;align-items:stretch;}}/*!sc*/ data-styled.g21[id="sc-ict75e-1"]{content:"szLJS,"}/*!sc*/ .bcVocn{flex-basis:100%;min-width:0px;}/*!sc*/ data-styled.g22[id="sc-1deose0-0"]{content:"bcVocn,"}/*!sc*/ .hwJNEl h2,.hwJNEl h3,.hwJNEl h4,.hwJNEl h5,.hwJNEl h6{font-family:var(--font-normal);margin-top:2.5rem;margin-bottom:1.3rem;}/*!sc*/ .hwJNEl h2{font-weight:600;}/*!sc*/ .hwJNEl p{margin-bottom:1.3rem;}/*!sc*/ .hwJNEl img{margin-bottom:1.3rem;}/*!sc*/ @media (max-width: 700px){.hwJNEl img{width:100%;}}/*!sc*/ .hwJNEl p>img{width:100%;object-fit:contain;margin-bottom:0;}/*!sc*/ .hwJNEl hr{height:1px;padding:0;margin:1em 0;background-color:var(--bg-hr);border:0;}/*!sc*/ .hwJNEl blockquote{color:inherit;border-left-color:inherit;border-left-width:2px;border-left-style:solid;opacity:0.9;font-style:italic;margin-left:-12px;padding-left:10px;margin-top:0;margin-bottom:1.3em;}/*!sc*/ @media (max-width: 700px){.hwJNEl blockquote{margin-left:0;}}/*!sc*/ .hwJNEl strong{font-weight:500;color:var(--text-secondary);}/*!sc*/ .hwJNEl a>strong{color:inherit;}/*!sc*/ .hwJNEl a>code{color:var(--color-primary)!important;}/*!sc*/ .hwJNEl a>code:hover{color:var(--color-secondary)!important;}/*!sc*/ .hwJNEl details{margin-bottom:1rem;}/*!sc*/ .hwJNEl summary{outline:none;}/*!sc*/ .hwJNEl ul,.hwJNEl ol{list-style-position:outside;margin-top:0;margin-bottom:1.3em;padding-left:0;}/*!sc*/ @media (max-width: 700px){.hwJNEl ul,.hwJNEl ol{padding-left:1rem;}}/*!sc*/ .hwJNEl li{line-height:1.75;margin-bottom:4px;}/*!sc*/ .hwJNEl table{display:block;width:100%;overflow:auto;border-spacing:0;border-collapse:collapse;margin-top:0;margin-bottom:2rem;line-height:1.5;}/*!sc*/ .hwJNEl table th{padding:0;font-weight:600;padding:6px 13px;border:1px solid var(--bg-hr);background-color:var(--bg-overlay);}/*!sc*/ .hwJNEl table td{padding:6px 13px;border:1px solid var(--bg-hr);}/*!sc*/ .hwJNEl table tr{border-top:1px solid var(--bg-hr);}/*!sc*/ .hwJNEl table caption{font-style:italic;caption-side:bottom;color:var(--text-alt);text-align:right;margin-top:8px;}/*!sc*/ data-styled.g38[id="sc-1fjws22-0"]{content:"hwJNEl,"}/*!sc*/ .haZhyI{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;}/*!sc*/ data-styled.g39[id="sc-17u7yfr-0"]{content:"haZhyI,"}/*!sc*/ .jnzlfh{margin-left:1rem;color:var(--text-alt);border-bottom:1px dotted var(--text-alt);}/*!sc*/ data-styled.g40[id="sc-17u7yfr-1"]{content:"jnzlfh,"}/*!sc*/ .icRdFZ{color:var(--text-alt);display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin-top:0px;font-size:11px;font-weight:600;text-transform:uppercase;}/*!sc*/ data-styled.g41[id="sc-18ktftd-0"]{content:"icRdFZ,"}/*!sc*/ .kxqAcb{margin-right:1rem;}/*!sc*/ data-styled.g42[id="sc-18ktftd-1"]{content:"kxqAcb,"}/*!sc*/ .gyejjM{color:inherit;box-shadow:none;text-decoration:none;margin-right:6px;}/*!sc*/ data-styled.g43[id="sc-18ktftd-2"]{content:"gyejjM,"}/*!sc*/ .iHYSKZ{display:flex;flex-direction:column;align-items:stretch;}/*!sc*/ data-styled.g51[id="sc-1jwtyf9-0"]{content:"iHYSKZ,"}/*!sc*/ .iGJscr{margin-top:0px;margin-bottom:1rem;}/*!sc*/ data-styled.g52[id="sc-1jwtyf9-1"]{content:"iGJscr,"}/*!sc*/ .jxodcM{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;margin-bottom:12px;}/*!sc*/ data-styled.g53[id="sc-1jwtyf9-2"]{content:"jxodcM,"}/*!sc*/ .gWNfDY{box-shadow:none;color:var(--color-primary);font-weight:500;font-size:1rem;}/*!sc*/ data-styled.g54[id="sc-1jwtyf9-3"]{content:"gWNfDY,"}/*!sc*/ .kFoKea{margin:0;color:var(--text-alt);margin-left:12px;font-size:0.85rem;font-style:italic;}/*!sc*/ @media (max-width:768px){.kFoKea{display:none;}}/*!sc*/ data-styled.g55[id="sc-1jwtyf9-4"]{content:"kFoKea,"}/*!sc*/ .fIkfBq{display:flex;flex-direction:column;align-items:stretch;}/*!sc*/ data-styled.g56[id="sc-15ddf74-0"]{content:"fIkfBq,"}/*!sc*/ .cvtbJE{font-size:1.6rem;font-weight:700;margin-top:0px;margin-bottom:0.5rem;letter-spacing:-1px;}/*!sc*/ @media (max-width: 700px){.cvtbJE{font-size:1.5rem;}}/*!sc*/ data-styled.g57[id="sc-15ddf74-1"]{content:"cvtbJE,"}/*!sc*/ .bCDZKN{margin-bottom:2rem;}/*!sc*/ data-styled.g58[id="sc-15ddf74-2"]{content:"bCDZKN,"}/*!sc*/ .lhFpvY{margin-top:1rem;}/*!sc*/ data-styled.g60[id="sc-15ddf74-4"]{content:"lhFpvY,"}/*!sc*/ .bXvioR{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--bg-hr);}/*!sc*/ data-styled.g61[id="sc-15ddf74-5"]{content:"bXvioR,"}/*!sc*/ </style><link rel="sitemap" type="application/xml" href="/sitemap/sitemap-index.xml"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="sc-ict75e-0 ieOLZz"><header class="sc-18i19tb-0 bKcUHV"><div class="sc-18i19tb-1 bbTXGV"><a class="sc-18i19tb-4 jxNdqP" href="/">BYBY.DEV</a><div class="sc-18i19tb-2 jBDEON"><a class="sc-18i19tb-3 blKEdP" href="/about">about</a><a class="sc-18i19tb-3 blKEdP" href="/t/swift">swift</a><a class="sc-18i19tb-3 blKEdP" href="/t/swiftui">swiftui</a><a class="sc-18i19tb-3 blKEdP" href="/t/ios">ios</a><a class="sc-18i19tb-3 blKEdP" href="/contact">contact</a><a href="https://x.com/bybydev" class="sc-18i19tb-3 blKEdP" target="_blank" rel="noopener noreferrer">𝕏</a></div></div></header><div class="sc-ict75e-1 szLJS"><div class="sc-1deose0-0 bcVocn"><div class="sc-15ddf74-0 fIkfBq"><h1 class="sc-15ddf74-1 cvtbJE">How to parse and format a date in JavaScript</h1><div class="sc-18ktftd-0 icRdFZ sc-15ddf74-2 bCDZKN">Updated Jun 01, 2024<a class="sc-18ktftd-2 gyejjM" href="/t/javascript">#javascript</a><a class="sc-18ktftd-2 gyejjM" href="/t/dates">#dates</a></div><div class="sc-1fjws22-0 sc-15ddf74-3 hwJNEl">Parsing and formatting dates in JavaScript can be error-prone and require careful consideration of different time zones and date formats. Even JavaScript provides several built-in methods and objects, you might need a library to ensure that your applications handle dates consistently and accurately, regardless of where the date comes from or how it is displayed. Working with a date involves converting to and from a specific format. The format can include different components such as the day, month, and year, as well as separators like slashes or dashes. There are several common date formats used around the world, including: <div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">- ISO 8601: YYYY-MM-DDTHH:mm:ss.sssZ (e.g. 2022-05-30T00:00:00.000Z) - Short date: mm/dd/yyyy or dd/mm/yyyy (e.g. 04/24/2023 or 24/04/2023) - Long date: MMMM dd, yyyy (e.g. April 24, 2023) - RFC 2822: EEE, dd MMM yyyy HH:mm:ss GMT (e.g. Mon, 24 Apr 2023 00:00:00 GMT) - Unix timestamp: the number of seconds or milliseconds since January 1, 1970 (e.g. 1640256000)</code></pre></div> In this tutorial, we will focus on the <code class="language-text">dd/mm/yyyy</code> format and explore various ways to parse, format, and manipulate dates in this format using JavaScript. This format is the standard way of representing dates in many countries. <h2>How to parse a date</h2> In JavaScript, parsing a date means converting a string representation of a date into a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" target="_blank" rel="nofollow noopener">Date</a> object. This is often necessary when working with dates that are obtained from external sources such as APIs or user input fields. JavaScript provides several methods for parsing dates, such as <code class="language-text">Date.parse()</code> and <code class="language-text">new Date()</code> constructor. It’s important to note that the date string must be in a specific format that can be recognized by the parsing method. Common formats include ISO 8601, RFC 2822, and short date formats such as <code class="language-text">mm/dd/yyyy</code> or <code class="language-text">dd/mm/yyyy</code>. <div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">// Parse an ISO date string const ms = Date.parse("2022-05-30T00:00:00.000Z"); console.log(ms); // 1651296000000 // Parse a non-ISO date string (may not work in some browsers) const ms2 = Date.parse("30/05/2022"); console.log(ms2); // NaN // Create a Date object from an ISO date string const dt = new Date("2022-05-30T00:00:00.000Z"); console.log(dt); // 2022-05-30T00:00:00.000Z // Create a Date object from numbers const dt2 = new Date(2022, 4, 30); // Note: month is zero-based console.log(dt2); // 2022-05-29T17:00:00.000Z</code></pre></div> Check out those libraries in formatting section below, they also provide robust parsing capabilities. In addition to supporting a wide range of date formats, they also offer features like fuzzy parsing, which can interpret partial or ambiguous dates based on context. Once a date is parsed in JavaScript and converted to a Date object, it can then be formatted into a string with a specific date format. <h2>How to format a date</h2> There are different ways to format a date as <code class="language-text">dd/mm/yyyy</code> in JavaScript, depending on your preference and use case. Here are some possible solutions: <ol> <li>Using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString" target="_blank" rel="nofollow noopener"><code class="language-text">toLocaleDateString()</code></a> method with a locale parameter of ‘en-GB’ to get the date in dd/mm/yyyy format. It does not provide full control over the formatting of the date string, as it relies on the formatting rules and conventions defined by the locale.</li> </ol> <div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">const date = new Date(); // British English uses day-month-year order console.log(date.toLocaleDateString('en-GB')); // 24/04/2023 // US English uses month-day-year order console.log(date.toLocaleDateString("en-US")); // 04/24/2023</code></pre></div> <ol start="2"> <li>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate" target="_blank" rel="nofollow noopener"><code class="language-text">getDate()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth" target="_blank" rel="nofollow noopener"><code class="language-text">getMonth()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear" target="_blank" rel="nofollow noopener"><code class="language-text">getFullYear()</code></a> methods to get the day, month and year of the date, and then concatenate them with slashes. You may need to add a leading zero to the day and month digits if they are less than 10. For example:</li> </ol> <div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">const today = new Date(); const yyyy = today.getFullYear(); let mm = today.getMonth() + 1; // month is zero-based let dd = today.getDate(); if (dd < 10) dd = '0' + dd; if (mm < 10) mm = '0' + mm; const formatted = dd + '/' + mm + '/' + yyyy; console.log(formatted); // 24/04/2023</code></pre></div> <ol start="3"> <li><a href="https://day.js.org/" target="_blank" rel="nofollow noopener">Day.js</a> (<a href="https://github.com/iamkun/dayjs/" target="_blank" rel="nofollow noopener">46k</a> ⭐) — A minimalist library that offers an excellent API without much overhead. It is very similar to Moment.js but much smaller in size. It also supports plugins for additional features.</li> </ol> <div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">const dayjs = require("dayjs"); const dt = dayjs("2022-05-30T00:00:00.000Z"); const formatted = dt.format("dd/MM/yyyy"); console.log(formatted); // 30/05/2022</code></pre></div> <ol start="4"> <li><a href="https://date-fns.org/" target="_blank" rel="nofollow noopener">date-fns</a> (<a href="https://github.com/date-fns/date-fns" target="_blank" rel="nofollow noopener">33.9k</a> ⭐) — A library that offers great documentation, functional architecture, and utilities that handle almost any task you can think of. It has a modular design that allows you to import only the functions you need.</li> </ol> <div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">const { format } = require('date-fns'); const today = new Date(); const formatted = format(today, 'dd/MM/yyyy'); console.log(formatted); // 24/04/2023</code></pre></div> <ol start="5"> <li><a href="https://moment.github.io/luxon/" target="_blank" rel="nofollow noopener">Luxon</a> (<a href="https://github.com/moment/luxon" target="_blank" rel="nofollow noopener">15k</a> ⭐) — A library that leverages JavaScript’s Intl for speed and slimness while providing what Intl doesn’t: an immutable user-friendly API. It also supports time zones and localization.</li> </ol> <div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">const { DateTime } = require("luxon"); const dt = DateTime.fromFormat("31/12/2022", "dd/MM/yyyy"); const formatted = dt.toFormat("dd/MM/yyyy"); console.log(formatted); // 31/12/2022</code></pre></div></div><div class="sc-17u7yfr-0 haZhyI sc-15ddf74-4 lhFpvY"><a href="https://twitter.com/intent/tweet?text=How%20to%20parse%20and%20format%20a%20date%20in%20JavaScript&url=https%3A%2F%2Fbyby.dev%2Fjs-format-date" class="sc-17u7yfr-1 jnzlfh" target="_blank" rel="noopener noreferrer">share twitter</a><a href="mailto:hi@byby.dev?subject=Feedback%3A%20How%20to%20parse%20and%20format%20a%20date%20in%20JavaScript&body=https%3A%2F%2Fbyby.dev%2Fjs-format-date" class="sc-17u7yfr-1 jnzlfh" target="_blank" rel="noopener noreferrer">send feedback</a></div><div class="sc-1jwtyf9-0 iHYSKZ sc-15ddf74-5 bXvioR"><h4 class="sc-1jwtyf9-1 iGJscr">You might also like</h4><div class="sc-1jwtyf9-2 jxodcM"><a class="sc-1jwtyf9-3 gWNfDY" href="/js-async">Asynchronous Programming in JavaScript</a>Oct 25, 2019</div><div class="sc-1jwtyf9-2 jxodcM"><a class="sc-1jwtyf9-3 gWNfDY" href="/js-static-type-checkers">JavaScript Static Type Checkers</a>Oct 28, 2019</div><div class="sc-1jwtyf9-2 jxodcM"><a class="sc-1jwtyf9-3 gWNfDY" href="/js-code-linters">JavaScript Code Linters</a>Oct 29, 2019</div><div class="sc-1jwtyf9-2 jxodcM"><a class="sc-1jwtyf9-3 gWNfDY" href="/js-tree-shaking">Tree Shaking in JavaScript</a>Jan 01, 2020</div><div class="sc-1jwtyf9-2 jxodcM"><a class="sc-1jwtyf9-3 gWNfDY" href="/js-module-formats">JavaScript Module Formats</a>Aug 16, 2021</div><div class="sc-1jwtyf9-2 jxodcM"><a class="sc-1jwtyf9-3 gWNfDY" href="/js-paradigms">JavaScript Programming Paradigms</a>Feb 17, 2020</div><div class="sc-1jwtyf9-2 jxodcM"><a class="sc-1jwtyf9-3 gWNfDY" href="/js-type-safety">Type Safety in JavaScript</a>Feb 18, 2021</div></div></div></div><aside class="sc-byfmz-0 dZlVJz"><div class="sc-1h580ev-0 klXVYf sc-byfmz-1 khGmUV"><a href="https://compressx.app" target="__blank" rel="nofollow"><img src="/img/AdBannerSmall.png" class="sc-1h580ev-1 hnVNEu"/>Compress video and image with up to 90% file size reduction.</a></div><div class="sc-1e3eom7-0 kvNARb sc-byfmz-2 cJWZkZ">Featured Content<a class="sc-1e3eom7-2 hIiPRt" href="/frontend-interview-part-1-overview">Cracking the Frontend Interview</a><a class="sc-1e3eom7-2 hIiPRt" href="/fullstack-javascript-part-1-motivation">Become a Fullstack JS Developer</a><a class="sc-1e3eom7-2 hIiPRt" href="/ios-interview">Cracking the iOS interview</a><a class="sc-1e3eom7-2 hIiPRt" href="/mastering-javascript">Mastering JavaScript</a><a class="sc-1e3eom7-2 hIiPRt" href="/mastering-typescript">Mastering TypeScript</a><a class="sc-1e3eom7-2 hIiPRt" href="/swift-5-10">What's New in Swift</a><a class="sc-1e3eom7-2 hIiPRt" href="/mastering-swift">Mastering Swift and SwiftUI</a><a class="sc-1e3eom7-2 hIiPRt" href="/web">Mastering Web Development</a><a class="sc-1e3eom7-2 hIiPRt" href="/css-for-beginners">CSS for Beginners</a></div><div id="carbon-container"></div></aside></div><footer class="sc-w2x1zc-0 dPDXpA"><div class="sc-w2x1zc-1 gvSyvW">© 2019 - 2024 byby.dev<div class="sc-w2x1zc-3 jgZslX"><a class="sc-w2x1zc-4 jgUudb" href="/contact">contact</a><a class="sc-w2x1zc-4 jgUudb" href="/terms">terms</a><a class="sc-w2x1zc-4 jgUudb" href="/privacy">privacy</a><a class="sc-w2x1zc-4 jgUudb" href="/disclaimers">disclaimers</a></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/js-format-date";/*]]>*/</script> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-a9a9966076b99e1276bd.js\"],\"component---src-pages-404-js\":[\"/component---src-pages-404-js-029c8ca1bb049549acc6.js\"],\"component---src-pages-home-js\":[\"/component---src-pages-home-js-4af7570b13f80ec3ef1c.js\"],\"component---src-pages-tags-js\":[\"/component---src-pages-tags-js-527f35555a1dafb0ef33.js\"],\"component---src-views-post-js\":[\"/component---src-views-post-js-600244062ef362931046.js\"],\"component---src-views-posts-js\":[\"/component---src-views-posts-js-b2b43dbfc06ef7163af1.js\"],\"component---src-views-tag-js\":[\"/component---src-views-tag-js-41eaeed5fe775bff7403.js\"]}"; </script> <script>window.___webpackCompilationHash="d86202ad00173ebb8cdb";</script><script src="/webpack-runtime-ddeb4b88cbcbc5de906b.js" async></script><script src="/framework-50078dfcade4b9dda684.js" async></script><script src="/app-a9a9966076b99e1276bd.js" async></script></body></html>