How to Format Dates with Vanilla JavaScript

I don't know about you but I spent a silly amount of time taking things like the current date and then trying to figure out what day of the week it falls on so perhaps I'd have some kind of array with like Sunday Monday Tuesday and then try to figure out based off of that what day it's on and none of that needs to happen there's actually something that lives directly on date objects called the two Locale date string you can see here that this actually just built into JavaScript and that means if I want to figure out what day of the week it is I can console.log here the day of the week and just pass it my now and it tells me it's Monday I don't have to figure all this out myself I don't have to write some complicated thing it's already baked directly into the browser and it can do way more than that for instance I can pass it a date style and then a calendar I want it to display in and a special Locale I want it to be shown in at all times no matter where you're finding this and then I can pass it the full date and now what it will tell me is in Korean the full date with a Persian calendar all right all kinds of stuff you can do here and it takes takes no work at all this is built directly into the browser and I'm going to show you how to use it foreign public on the left here I've got a JavaScript file and over on the right I've just got the docs for two Locale date string we're going to start with just a few dates so let's say something like now equals new date and if I pass it just like that that should give us a date let's also say something like uh how about New Years something like that so we'll say new date and here I'll pass it 1 1 22. all right so that's two different dates to work with and we're going to go ahead and start working with this and there's two things you can pass into it but before I get into that note first of all that basically is just an implementation of an API that already exists and it's just attaching that to this date object so that's important because it it means we can kind of customize it and there's actually some performance gains we can get if we want to write this ourself rather than using the method here so as I've scrolled on here the two things you can pass in are locales or options and you can pass in one and or the other whichever one you prefer so I'll come down this way and let's talk about locales first so first of all I'm going to say console.log and let's just say now and now I'm using an extension called quoka here that will print things out for me so you can see it directly in the Javascript file which will make it a little bit easier to show it to you so I'm going to say to Locale date string and then again we can pass it two things let's start with nothing and just see what it prints so if I do that you can see all the way over here it's going to print the date just like this and it's the seventh where I'm at which is the night before you're seeing this so you can see here I've got it pulled up now I can if I want to switch that around for instance if I'm filming Great Britain I might do it more like this and then that prints it out the other way day then month and then Year I'll leave it to you which one is best but the point is that you can basically decide how it's displayed now usually you'll actually leave this alone and that way it displays in whatever the client sees normally so if they're in the US they would expect it to be month day year and if they're somewhere else they might expect it the other way around so usually you leave that alone and let the browser determine that for the end user however you can't specify that if you want and you can even do other things like I think Korean or something like that yeah so you can see how that spells it out a little bit differently they've got periods after each and they start with a year now let's go ahead and just change this back to en us to start with and that should work just fine now the second thing you can pass in is an object and you can see that right here now if I want to very quickly see what's available to me I can scroll down here and what they're going to do is basically Point me over to the internationalization API because again it's just corresponding to its own options because it's just wrapping it so the Constructor that's found here is the same options that we have if I click here it'll actually bring me to those docs you can see I've got a whole list of them if I want to see it quickly here in my editor I can just hit control and spacebar and I get all these that show up for me this is just showing you what's available with this method so a bunch of these here first of all let me just show you kind of some more macro ones that will determine several things for you and the first one here is date style so if I add date style here and again this is just an object so I can just say full and what you'll see is I'll get the full date written out just like that I can also say along or I can say short or I can say medium I think short is the default yeah there you go so there you go so that's the date style now time style works the same way notice that because these are more macro ones you can't specify kind of smaller details and I'll show you why in a second because if you just specify this it will only return the weekday and that might be useful for instance if you want to say what day a certain event shows on you can just say Monday you don't have to write your own function for it just use the API that's found in the browser all right so those two are kind of macro ones you can see then I've got other ones that just kind of add additional elements onto whatever the date is so for instance I might want to specify a different calendar than my Locale would be used to so I could say something like calendar and then I could type in like Persian or something and this would actually tie it to the Persian calendar I could do the same thing for Chinese like that and you can see how it's giving me the Chinese but still it's giving it to me in English because that's my Locale if I were to change this around so if I go back to Korean like this you can see now I get the Chinese calendar in Korean I'm assuming and that's what that is or I could say uh German which I think is something like that maybe all right and you can see how I can just switch this around very easily so in this case maybe let's go with Hebrew and then we get a Hebrew calendar and you can see that I'm getting it in German though even though I'm telling the calendar to be a little bit different again usually you know unless you have a very specific use case you're going to just use whatever the locales calendar is so you just remove it like that and it should show as you'd expect now either are a ton in here that could be useful too I'm going to skip through a lot of these because I don't think you're going to use them just like the calendar I just wanted to show you how that works you can come in here and actually specify a time zone if you don't it just uses the the client's default so wherever they're at in the world it will basically adjust for them which is usually what you want but you could come in here instead and let's say I said time zone and I wanted it to instead of being in my current Locale I wanted it to be UTC time well that actually puts it into tomorrow so it shows tomorrow's date another thing to note here is if you want it to be 12 or 24 hour time depending where you're at your Locale will actually set that as the default however you can override that if you want with this hour 12. let me scroll back down this way and I want to now show you a couple other things that are important I'll skip past some of these but like here's the weekday one so let's say I just want to return what day is today well I could just pass it weekday and then pass it something like long oops long like that in strings you can see here that today is Monday or I can shorten that like that and just say mon or narrow I think just gives me maybe the day yeah just like T or M in this case now I don't know why you'd want this but for instance you might want to set the era so like if you're writing some kind of important history and you want to know this is ad on Monday that would be useless to pretty much everybody like that but you can see how that might be helpful same thing with year so let's say you want to actually specify the weekday and you want to leave it narrow and maybe you want the year here to be a two digit you can set it up just like that same thing with month you can set it to just the day or the two digit or the long or short or narrow same thing with the day as well you can say it has a leading zero if it needs it or just give it the number it has hour minute second all that works the exact same and you can see how helpful and useful that is now one final one that might be interest of you to you would be this time zone right here so let's get rid of all this junk what I could do is if I want to specify the time zone you can see here I'm actually spelling it out the mountain standard time that's where I'm at right now or you could shorten it just like that mountain standard time or do an offset and you can see these down here as well so those are all super super helpful now one thing to note quickly is if you want to skip over placing this here you can actually pass an undefined and that will actually skip it and allow this to be customized to the person but still allow you to add some options object as far as how you want it to be displayed so in this case let's say I wanted the date style to be full but I just want it to be whatever their current Locale is in but I want to specify that this is what it's going to look like well passing undefined will allow that to happen now one thing to note is they say that if you're doing this to lots of dates it's actually best or more performant to actually use the internationalization API itself now one other thing as to how I'd actually use this I would probably have something like a function maybe I'd make it an arrow function and I'd call this like day of week and then I would pass it a date and then I would just return dot to Locale date string and here I would actually specify what I want here so maybe I'd have this undefined to start with and then I'd pass in an options object and I'd say weekday and I'd say long now what I could do is say console.log day of the week and what I want to pass in here would be now now you can see that that gets me this back so if I'm writing a bunch of JavaScript I can just quickly pass in dates that I need inside of a string so perhaps I'm writing some jsx or just interpolating values directly inside of JavaScript and I have some kind of string that I'm passing back maybe it's something like a paragraph tag just like this and inside here I might say something like today's day of the week is and then I pass in here day of the week and I pass in now you can see here that what I get back is the string that passes me it's Monday let's see what day of the week New Year's is so I could come in here and yeah I'll just give it a new years like that and you can see how that's what it's going to give me back so usually I would have some kind of function and just pass in what I want for each of these now for instance let's say I want it to be like a fully typed out thing or I'd have the weekday then I'd have the year and maybe I'd want this to be long as well well now what you can see is that I can actually get all of this back oh not long I think this is numeric that's one of the options there we go all right so uh 2022 Saturday all right that's not very helpful to anybody but you can see that that's exactly what I can pass it see this could be something like two digit as well and pass that in and now I'm getting today's day of the week is zero one Saturday just like that I think the other option here again might be numeric and you can see if I pull that over here yeah one Saturday 2022. again that's not super helpful the way that that's spaced out but you can see how you can kind of specify exactly what you want and then just call the function when you want to pass a date to it I hope that's helpful for you kind of getting your mind wrapped around it this internationalization API is super helpful and it's nice that they've Incorporated uh a lot of its features inside of methods that live directly on data objects and string objects and a bunch of cool stuff in JavaScript well if you like this video and it was a help to you please leave a like and let me know in the comments if there's anything I missed I'll catch you in the next one happy coding

Channel: Coding in Public

Views: 6,282

Keywords: toLocaleDateString

Id: L96bnt7KG6Y

Length: 10min 50sec (650 seconds)

Published: Tue Nov 08 2022