Adding A Publish Date & Time Input

In This Lesson

We'll add publish at date & time fields to our lesson form. We'll learn how we can split these two values apart for their inputs and join them back together before sending to the server. We'll also touch on timezone considerations.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

It's going to consist of a date and time field using the native browser inputs for that. So let's go ahead and add that in next. So we'll jump back into our text editor.
We can scroll back down to where we have our components and let's start by adding in a new component for this. So we'll do new file underneath our components and call this our dates picker dot view.
We'll have a script. This will be set up line TS and it's going to have some props.
So we'll do define props and give it a type of dates, which will take in as a string and
time, which will take in as a string, which is going to come from our lesson form DTO. We're going to need to work with both our date and time individually inside of this component.
So we'll treat them completely separate. So we'll have a const emit with define emits that has an update date and an update time.
Each one of those will be a named view model. Outside of this component that will pass in. We also want to do a constant date, which is going to be a computed property from view
with a getter that returns back the props date and a setter that takes in the new value
and calls our emit update date event passing that new value in. We want to do that exact same thing for our time.
So compute it there with a getter returning our props time and our setter returning our value emit update time passing that value in.
For our template then we'll do a div class flex width full max width small items center and a gap of 1.5.
Inside of that div we'll use the ShotCN input component with a type of dates, a view model of dates, and then we can self-close that input.
Then we'll have a second input with a type of time and a view model of time. Self-closing that one there as well. We can then jump into our sortable lessons component and make use of this component.
So we want to scroll down to where we have our form dialogue. And I'm going to insert this directly after our name input.
We can use our form input component, set its type to group so that we can pass a child input
in set our label to publish at and pass the error of either our form errors publish at
dates or our form errors publish at time. If we have an error for our publish at then that one will get used first.
If we have an error for our time, but not publish at, then it will fall back to that error. Inside of our form input here, we want to add in our date picker component with a view
model named date passed in from our form publish at date field, then view model time coming
from our form publish at time field and self-close that. What we need to do next is join these values back into our single publish at field for storage inside of our database.
Since we're plucking these values apart on our client side, we're also going to go ahead and put them back together on our client side, keeping that all in one spot.
And to do that, we can chain off of our form prior to posting or putting a transform method
that will allow us to transform any form values before they actually get sent up to our server. So I'm going to go ahead and just copy these two lines here where we have our create and update and we'll create a new method to serve in its stead.
So for both of these, we'll do on submit in place of our form events here. And then we'll paste those form events inside of this new on submit function that will be up in our script here.
So we'll do function on submit, and I'm just going to go and paste those in because we're still at the end of the day going to want to call our form post and form put for these two.
And then since we're inside of our script, we now need to do dialog.value to reach through that proxy. And now we need to determine which of these two events we're trying to do with this on submit action.
There's plenty of different ways that we could do that. We're just going to go ahead and reach for the ID via our dialog value resource ID as
when we're updating, we're going to need to plop that into the URL anyway, so we can get rid of that inside of the URL and just pass in that ID variable.
Then we know that if we have an ID, we want to update, otherwise we want to create.
So we can go ahead and return if we're updating so that we don't reach our creation. Prior to doing either of those, though, we want to mutate our form to join the publish
app back into one. So we can put this inside of an action, call our form transform.
And this provides us in our form data so we can extract out the publish at date and
publish at time and then spread in the rest of our data and then return that directly back from this transform callback. Spread that data back in.
But we also want to join in our publish at date and publish at time into our publish at value. So we take those two values and join them back together using Lux and date time from an ISO format.
If we provide in those two values as an array, starting with our publish at dates and then
the publish at time as the first index, we can join those together using T, which will ultimately join those two into an ISO format.
Then we want to convert that to UTC for our returned publish at date value. So they're converted to the UTC time zone from the user's personal time zone.
One more step, though, we only want to try the date time here if we have both a date and a time value.
So we can also wrap this in a publish at dates and publish at time, ternary check and return back null if we don't have anything.
Then rather than using our form to send out our put or our post, we can now use our transformed action for both of those, just like so.
And now our publish at should be able to get posted up with this. So if we jump back into our browser, let's try to add in a new lesson. Call this fourth.
We have our publish at field so we can select on this. Select the 10th, give it a time of maybe 9 a.m. and try adding this lesson in.
And everything seems to have saved OK, we can go ahead and edit, make sure that that gets populated. OK. And sure enough, 10th, 9 a.m. looks good. Try to add in a new lesson to clear that out.
Go back into edit to make sure that it gets populated correctly. And it sure does. So it'd be great next is to display that next to the lesson itself so that we know when it's scheduled for.
So let's go down to our lessons list. We'll put this after the lesson's name. So we'll add in an additional span here, but only display it if the lesson has a publish
at date. If it does, we can give this a class of text slate 400 text extra small.
Hide it on mobile devices and then on LG display flex item center with a gap of two.
We can give it a calendar block icon from Lucidview next with a class with 3H3 self close that.
We can use Luxon to grab this value from an ISO off of our lessons, publish at property
and display it relative based off of the current date time as well, using the two relative method. And before I save that, I have my LG flex and item center colliding with one another. So I'm going to fix that.
Now we should be able to save, jump back into our browser. And sure enough, we see fourth is going to publish in two days. So it's relative to my current date time.
If I go ahead and now edit and let's switch this to maybe sometime last week updates, it now says four days ago.
And thanks to how we have this set up, Luxon date time is going to take care of our time zone issues automatically for us. For example, if I go ahead and jump back into my browser and edit our post and set
the publish at to the current date time. So currently it's the eighth and it is 954 AM. Update the lesson there.
And you can see that this was set this 37 seconds ago because it's setting to zero seconds, which is relative to my current date and time.
However, if we jump back into our text editor and we get rid of the ISO as well as the two relative to plot just the string value that we have on our publish at onto the page, jump
back into our browser, you'll see that this is displaying as 12, eight, 1400 hours, 54
with a zero time zone, which is universal time zone or UTC, which on a 12 hour clock would put this at about 2 54 PM.
My current time zone is five hours behind universal time zone, which would make this correct.
Five hours before two 54 would be nine 54, meaning Luxon is doing all of the heavy lifting automatically for us just by us passing it through it and formatting it the way that we need.
So we are a okay to move on with just having this as our time zone management.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.