Build a Realtime Chat with Laravel, Vue and Pinia
This episode is for members only

Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.

Get started
Already a member? Sign in to continue
Playing
21. Better formatted dates

Episodes

0%
Your progress
  • Total: 1h 41m
  • Played: 0m
  • Remaining: 1h 41m
Join or sign in to track your progress

Transcript

00:00
Let's make the dates that we're outputting a little bit more visually appealing. The moment we're just dumping out the created at date and includes loads
00:07
of information that we don't need. We'll take this a little step further and we'll create a method in here, which returns either the string today, yesterday, or if it was before yesterday, we'll just output the date and time.
00:20
Okay. So all we need in here is just a method to grab this. So let's call this created at human. Of course, call that whatever you want.
00:28
And let's just return anything in here and swap this over. So if we head over to our message resource, we can go ahead and swap this out now for that created at human method. And of course, that's going to give us ABC.
00:41
Okay. So now into the method, let's look at how we can do this. Now we can do this really conveniently with a PHP match statement. Let's go ahead and return match true.
00:53
And actually let's assign this first of all, because we're always going to want to add on the time at the end of this. And if we match true, what we can do is use carbon to work out. If we are today, yesterday, or if not, we'll output the date and time string.
01:09
So what we can do is the condition. We can say this created out, which is the carbon date. We can say is today. Well, if that's the case, we want day to be today.
01:18
So we can just output the string today. We can do the same thing for yesterday as well. So we can say is yesterday and we can output in here yesterday. Now by default, what's going to happen if we just define the default
01:32
out is we just want the date string. So we can just say this created at, and to date string, and that will format that properly. Okay.
01:43
So now that we've done this, let's just return the day and let's just see what happens. So if we head back over, you can see that all of these were posted a little while ago, let's just write hello in here.
01:53
You can see this now says today, if it was yesterday, of course it would show yesterday. Now we always want the time on the end of each of these. So what we can now do is just return day.
02:04
We've already done that down there, but let's just do that again. And we can just add on a space and then we can say this created at two time string. Now by default, the time string will always have the seconds, which might not be useful.
02:22
So what we can do is we can go ahead and set in here the precision and we just want that to be on the minute. Let's go over, give that a refresh. And there we go.
02:32
So obviously if this was yesterday at a certain time, it would show that. Otherwise we get the full day. So feel free to tweak this, but that's a much better way than just dumping out the entire created at string.

Episode summary

In this episode, we're giving our dates a glow-up! Right now, our app is just dumping out the full created_at date and time, which can be a bit much and not super user-friendly. We're going to clean that up by building a handy method that formats dates in a nicer, more readable way.

Here's the plan: We'll add a method (we're calling it createdAtHuman, but feel free to name it whatever makes sense for you) that will return either today, yesterday, or, if it's older, just the date. We'll still include the time for all of them, but we'll bump up the readability a bit.

You'll see us use PHP's match statement along with Carbon to figure out if the date is today, yesterday, or something else. We'll make sure the output only shows the time up to the minute (no unnecessary seconds), giving us a clean look like today 14:36 instead of dumping the whole timestamp.

Finally, we'll check out the updated message list to make sure the new formatting works as expected. It's a small but effective way to make your app feel a little more polished for the user!

Episode discussion

No comments, yet. Be the first!