# How to Format Dates with Vanilla JavaScript This post is a product of a problem I was trying to solve while working on the ["Blog" section](https://www.alyssaholland.com/#blog) of my new website. I was referencing an article that describes [how to show blog posts on your personal website](https://sandeep.dev/how-to-show-blog-posts-from-your-hashnode-blog-on-your-personal-site). After successfully querying the data I realized that the `dateAdded` property was formatted one way and I wanted it to be displayed in a reader-friendly format. Throughout this article, I will explain my process of getting to a solution with vanilla JavaScript. # The Problem The date being returned back is in the standard [ISO](https://en.wikipedia.org/wiki/ISO_8601) format. As an example, the value for one of my blog posts is `"2020-10-09T06:17:30.511Z"`. However, I want to display the date in a `Month Day, Year` format. This would mean that the example date I just provided would get transformed to display: **October 9, 2020**. I know that there are libraries out there that do this for you, but I wanted to try and tackle this issue without the aid of third-party libraries since my use case for date formatting is limited to one particular area of my site. # My Original Solution My first pass at solving the problem looked something like this: ``` const getFormattedDate = (date) => { const newDate = new Date(date) const monthString = new Intl.DateTimeFormat('en-US', { month: 'long'}).format(newDate) const day = newDate.getDate() const year = newDate.getFullYear() return `${monthString} ${day}, ${year}` } ``` The last two lines before the return utilize JavaScript's [Date methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Instance_methods) to grab the day and year. However, the second line that utilizes the `Intl.DateTimeFormat()` was something new to me. As I started digging into the specifications, I learned that there were more advanced capabilities available and that I could use them to condense my code down even further. # Intl.DateTimeFormat() According to the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) > The `Intl.DateTimeFormat` object is a constructor for objects that enable language-sensitive date and time formatting. The constructor takes two optional parameters: 1. `locales` 2. `options` The first parameter, `locales`, is a string representation that defines a user's language and region. (For example, `en-US` for US English). If you want to use the browser's default locale you can either omit this parameter altogether or pass in `undefined`. The second parameter, `options`, accepts an object that allows you to customize the date and time formats based on certain settings. Because I wanted the date to be displayed in the `Month Day, Year` format I went with the `{dateStyle: "long"}` option. There are way too many options for me to list out in this article but definitely check out the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#Examples) for an exhaustive list of properties to choose from. # The format() Function Each `Intl.DateTimeFormat()` object has a corresponding ` format(date)` [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format). This method requires a [JS Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) as a parameter and it can be leveraged to format said date into a string that is formatted according to the `locale` and `options` that were passed in as params to the original `Intl.DateTimeFormat()` object. I'll provide an example in the next section demonstrating how this works in tandem with the `Intl.DateTimeFormat` object we discussed in the previous section. # Take Deux 🎬 1. Create a [Date object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) from the date argument in the function and assign it to a variable. 2. Return an instance of the `Intl.DateTimeFormat()`object and pass in the desired `locale` and `options` as parameters. 3. Chain the [format()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format) method to this object and pass in the Date object defined in Step #1. ``` const getFormattedDate = (date) => { const newDate = new Date(date); //Step 1 return new Intl.DateTimeFormat("en-US", { //Step 2 dateStyle: "long", }).format(newDate); //Step 3 }; ``` The final product looks like this on [my website](https://www.alyssaholland.com/#blog): ![Screen Shot 2020-10-10 at 5.11.58 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602364359153/XBaUdwe5R.png) # Browser Compatibility At the time of this writing, [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#Browser_compatibility) is not consistent for some of the `options` values like `dateStyle`, especially as it pertains to Edge and Safari. It's not a huge deal for my use case, but keep this in mind when reaching for these types of settings. However, the actual `DateTimeFormat()` constructor itself along with a lot of other `options` values are still compatible across all modern browsers so this is still a very powerful and compatible utility. # El Fin 👋🏽 With popular libraries like [momentjs announcing that they're a legacy project in maintenance mode](https://momentjs.com/docs/#/-project-status/), it's nice to know that there are native JS methods that allow you to do some convenient date and time formatting. I hope this proves to be a useful nugget of information the next time you need to deal with handling dates on the front-end. If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips. As always, thank you for reading and happy coding! ## Resources - [MDN - Intl.DateTimeFormat() constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) - [MDN - Intl.DateTimeFormat.prototype.format()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format) - [MDN - Date.prototype.getMonth() Example](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth#Examples) - [Wes Bos' 🔥 Tip](https://wesbos.com/tip/intl-datetimeformat-date-formatting) - [How to show blog posts from your Hashnode blog on your personal site?](https://sandeep.dev/how-to-show-blog-posts-from-your-hashnode-blog-on-your-personal-site) *[Photo by Monica Sauro on Unsplash]*