I did already transform this date
and talk about that in the MySQL section,
so again, I'll keep this a bit shorter here.
It is worth understanding which format this date has
when we fetch it from the database though.
So for this, I'll go back to blog.js,
and I will start by console.logging post.date here
so that we can have a look at this
in our raw JavaScript code.
If I now reload this page and go back to my terminal,
this is what we get.
So in the end, what we have here is a date object.
That's what I can tell you.
MongoDB, when it fetches a date from the database,
will automatically convert it
to this built-in date object JavaScript offers to you.
And that's good,
because that means that all these convenience methods
that exist on this date object,
which we have used here and there already
throughout this course,
can be used on this fetch the date just like this.
So with that new information gained,
what I wanna do here is I wanna manipulate my post
a little bit.
For my post object here,
I'll add a humanReadableDate first of all,
which I'll set equal to post.date
which will be of this built-in date object type already.
And therefore, on that date, I'll call toLocaleDateString,
which is a method built into JavaScript,
built into that date object we have there.
You can, of course, look up the exact definition on MDN.
I also do show that in the MySQL section.
But in the end,
that's a method that can be used on any date object
to format this date in a human readable format.
We first of all specify the locale we're targeting,
so the kind of language we're targeting.
And then, we can pass a second argument,
a second parameter value,
which is an object with some configuration options.
For example, we can set the weekday option to long
so that the output date will describe the day of the week
in a long way,
so in a very readable way.
We can set the year to numeric
so that the year portion is output as a number,
as a long number to be precise.
Month can be set to long
so that we don't output an abbreviated version of the month,
but we print the full month name.
And day can be output as a number again, with numeric.
Now these are some of the possible options
we can choose from.
Again, if you search for toLocaleDateString,
you'll find the full documentation
with all the different configuration options you can use.
But with that, I'm adding this new property
to this post object.
You did learn before that you can just add new properties
to existing JavaScript objects
by simply accessing properties that don't exist yet
through the dot notation
and then setting a value to them.
And after this was done,
I'll also override the date property
and set it to post.date.toISOString,
which gives us a machine-readable string version
of that date.
And therefore now I manipulated my post a little bit,
and back in post-detail,
post.date is now that machine-readable version.
And here, we can now output post.humanReadableDate,
that new property I added.
We an output this here as the text
that will be showed to the user.
So that's this new property I added here.
And with that all,
if we now save this and reload,
we got the human-readable text here.
And if we inspect this,
here we got the machine-readable version.
So that's all looking good.
And with that, we now are outputting
all the post detail data I do want to output.
Hence, we're already coming closer
to the end of this course section.
The last steps I want to take here,
the last features that should be implemented, of course,
are the features that allow us to edit and delete posts.
And as always, definitely pause here.
Don't follow along with the next lectures just yet.
Instead, try implementing those features on your own.
For the added post link here,
you should make sure that this added post,
this update-post template is opened, is rendered,
and may be prepopulated with the current data of the post,
that it's submittable and you then have a route
for handling this submission,
and that you then do update the data in the database
and that you also do add that deletion functionality.
Definitely try it on your own first.
Over the next lectures,
we'll implement those features together.