Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.3 Adding a Date/Time Picker

In this lesson, we're going to focus on the JavaScript for our blog create and edit views, because we need to improve the user experience. The datetime is a rather complex piece of information and we definitely don't want the user to have to manually type that stuff. And that would also mean that we would need to parse that information as well. And no, if we have a datetime picker, then everything is just going to be easier to work with. So the datetime picker that we're going to be using is called Tempus Dominus. It says it's version 5, but actually, 1 through 4 were a datetime picker for Bootstrap 3. In fact, I think it was called Bootstrap 3 DateTime Picker. It was very generic, so now it has a more catchy name. And it also works with Bootstrap 4, and that is what we need since that's what we have. So we want to install tempusdominus-bootstrap-4. We also want to save that. And while this is being installed, let's go to our code and let's go to resources > js, and let's open up the bootstrap.js file. Now this is primarily for setting up Bootstrap. It's actually required inside of app.js. But we are going to essentially set up the datetime picker here because it kind of makes sense to do so. Now in a real world scenario, we probably wouldn't want to actually do this here. Because we only need the datetime picker for two views. In that sense, it would make a lot more sense to only load those resources for those views. However, I'm lazy, I'm gonna take the easy way out and we're just going to bundle all of this together. So that the datetime picker code is going to be there for every single request because it's going to be part of the app.js. So after we require Bootstrap, the first thing we need to do is make the moment library globally available. Because the datetime picker needs it globally available. So we will simply require moment. We will set that to window.moment. And there we go so that then all we need to do is require the tempusdominus-bootstrap-4 module. And there we go, we are done with bootstrap.js. Now there is some CSS that we also need to pull in as well, so let's open up the sass folder. Let's go to app.scss. And the first thing we are going to do is import Font Awesome. Now once again, I'm going to take the lazy approach and we are just going to import a CDN. We could install Font Awesome 4 using NPM and go through that process, but this is just gonna be so much easier. And then we also want to import the CSS from Tempus Dominus. Now, this is going to require us to dig into node modules. So let's just dive right in there. Let's go down to the Ts, and we just need to find tempusdominus. We want to go inside of build > css, and then we want the min file. Now we're going to right-click and then copy relative path. Because that's going to give us essentially everything that we need. And we're going to import starting with a tilde, then we're gonna paste in that relative path. We will need to change the slashes so that they face the right way. But then we want to get rid of what has node_modules and just start with tempusdominus. That is going to give us a CSS that's going to be imported and built into our applications CSS, so we don't have to worry about that anymore. And with that done, we can go to the command line. Let's run npm run dev, that's going to build all of our resources. It's going to include those new changes, and so we will have that available. And while that is doing its thing, let's go to our layout. Let's go to app, and let's make some changes here. I want to move the script, the app.js script, and I wanna place it at the bottom. Now it is deferred by default, but notice that I took out the deferred attribute. This is just a personal preference of mine. I like to have most of my JavaScript at the bottom. So we will have the app. Then we will have the admin-app that has the stuff for deleting. But then we're also going to define a section for scripts so that if any views need to expose any of their own JavaScript just for those views, then we can yield those scripts there. So we would just have the ability to output a section called scripts so that inside of our edit and create views, we can do that. So let's go to admin, let's go to blog. We wants to open up the fields because we're going to have to make some changes to our Published Date field. We're also going to need to open up the edit and create views because we want those sections. So we will have a section called scripts, and let's endsection. And then we will simply include a file that we will create. And it's going to be inside of partials and it's just going to be called scripts. The idea is that it's going to contain the scripts necessary for the create and edit. So it's kind of like the fields in that sense. So inside of partials, let's go ahead and create that new file. We'll call it scripts.blade.php. We'll have a script element, and that will get us started there. So let's just make sure that's gonna work. Let's have an alert there and let's make sure that both of our views for create and edit have that alert box. So let's go back, let's refresh. We should see the alert box, we do. I'm going to assume that we will for the edit view. So good, we can close create, we can close edit, and let's get rid of that alert so that we don't have to deal with that anymore. And let's go to our fields because we need to modify pretty much all of the markup for our published_at field. So the first thing we need to do is make this div element relatively positioned, and we can do that with the position-relative class. And the reason being because there is going to be an absolutely positioned div element that will automatically pop up whenever we focus this input element. And it requires that its container be relatively positioned so that the popup will be properly positioned. I'm gonna put these attributes on their own line because that's a little bit easier to work with since we are going to be adding more attributes. And the first is going to be a data attribute called data-target. And the target is simply going to be this element. So we're going to use the id selector for published_at. The second attribute will be data-toggle, and this will be set to datetimepicker. Let's also add another class here. There's one that's called datetimepicker-input. And we will use that there so that now, there's one other thing we need to do, we need to go to scripts. And let's have an immediately invoked function. And we are going to, first of all, use jQuery to select the published_at field. We're going to call the datetimepicker method. Now there's some options that we will set, but let's first of all just make sure that this is going to work. So that whenever we focus the published date, we have the datetime picker automatically pop up, so we're good there. So now let's just add in our options, and we have three. The first is the format, which is going to be a four-digit year followed by a two-digit month, and then a two-digit day. Then we will essentially do the same thing for the hours, minutes, and seconds. And then we have an option called sideBySide, and if we set this to true, then the datetimepicker will have both the date and time side by side. This is a little bit easier in my opinion for the user so that they don't have to click extra buttons in order to toggle between date and time. And then finally, we have the date option, and we're going to set this to our model's published_at value. So there we go, we should be able to test this, although I don't think we added the published_at to the fillable array in our Post model, and no, we didn't. So I'm glad we checked that, so let's add that there, and everything should be okay. Let's go back to the browser. Let's refresh so that our new options are loaded. And as far as the title, let's say that this is to test the datetime picker. And as far as the slug, let's just do datetime. Now in the next lesson, we're going to write some JavaScript that will automatically populate the slug based upon what we write in the title. So that'll be a nice feature. And as far as the date and time, let's choose December 17th, and let's go to 5:05 PM. We'll leave the seconds there. And then we have the excerpt, and then the body. And then, cross your fingers, we will see if this actually works. And it created it, although let's go to our index view. Let's go ahead and add the published_at field. So let's just copy what we have for the slug. And then we will use that, although we do need to change slug to published_at. So now we should see that value. Let's see, December 17th, that's 5:05pm, so there we go. If we edit this, we should see the same value, we do. If we focus on this field, we can see that the datetime picker automatically populates with that information. So we're good to go. We now have an easier way of setting the published date. So in the next lesson, we will write the code to automatically populate the slug field.

Back to the top
View on GitHub