React, Redux & Firebase App Tutorial #31 - Formatting Dates with Moment

Key Takeaways

alright then so without putting pretty much all the content we need to on these projects the title who it's by and the content itself but one thing not correct is the date both on the details page and the summary so these are currently hard-coded in both of these components the project summary for the dashboard right here and also the project details right here so remember when we added a new project what we did is attach a date field to that and that field was called created at and this is a timestamp so now we want to grab that timestamp and output it to the Dom so that you usually can see exactly when that project was created so then let us now instead try and output that so we have access to the project right here okay so what if we try to output instead of this and I mean the project summary here by the way and I'll output project dot created at and then dot to date so if I save this now we should get an error and that error is because if we head over here we can see in one of these documents at the minute we don't have a created at property we do it all the rest I think created up created out and created out but not this one so what I'm gonna do is actually delete this document just so we don't have to deal with that so start delete and then if we go over here and refresh then it should work however we get an error and it says down here that objects are not valid as a reactor child so this right here this is actually a date object so what we could do is say dots you string I suppose and save that and let's see what happens and this time we get this a long winded date output to the Dom instead now I don't really want that either so I guess what I could do is use a variety of different date methods to grab the information I want and I'll put it in a certain way but that's a little long-winded so instead what I'm going to do is use a package called moment GIS and this allows us to format dates in a variety of different ways like this very easily okay so what we'll do is install moment first of all and then we'll use this package to output this date in a way that we want to so I'm going to go back to the editor and inside my console I'm going to see the into the Mario plan holder which is our project and then I'm gonna say npm install moment alright so once that's installed I can just say import moments from moments okay so now down here I'm gonna get rid of two string we're going to keep this we want to convert this into a date then what we want to do is pass that into the moment function like so so we're passing this date for our project into the moment function now when we're using moment we can use a variety of different methods like this to format our date differently okay so what we're gonna do is use in this method right here so that we can output our date like this so it's called calendar this method so all we need to say on the end of this is dots calendar like so now if we save this and view this in a browser we should see the date update and look like this and that looks a lot better okay so we still need to update it on the project details so let's grab this like so and copy it inside project details we need to first import moment and then we can use that down here so instead of this junk we can say this okay so let's save that and view this in a browser as well and we should see that update and we can see now when it was posted awesome so there we go my friend that's how we can work with moment very easily to output dates in a way that we want to