Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:10Length:50 minutes
Jui form 3
  • Overview
  • Transcript

2.4 jQuery UI Datepicker Widget

Moving on, in this lesson you’ll learn how to use the very powerful Datepicker widget, which gives the user a popup calendar from which they can choose their dates.

Related Links

2.4 jQuery UI Datepicker Widget

Hello and welcome back. In this lesson, we're gonna create another text field below our last one. And in this one we're going to ask our our potential employees what date they can start. And it's gonna be a simple text field, but we're gonna use the jQuery UI datepicker widget and attach it to that text field so that they will actually have a pop up calendar that they can choose a date from. So let's create another div here with a class of ui-widget and we'll create the closing div for that as well. And then let's create another label. And let's call this one start date and we're just gonna say, when can you start? And we'll close that label off. And then we're simply going to create an input field with a type of text and an id of start-date. Now attaching a datepicker widget to this is as simple as jumping into your jQuery, just like we've done with all of these other widgets. And then we're gonna point to our field. Can't remember if we gave it an id or a class, let's double check that. Of course we gave it an id because it matches the label for. Okay, so we're gonna point to that id of start-date and we're simply gonna say dot.datepicker(). When we do that, all we have to do is click inside this text field and there we go. Now we have a datepicker. We can cycle through the months and when we click on a given date, you'll see that that date populates our text field. And we're seeing that this particular text field isn't getting the styles that we want. So let's go into our HTML, and we're gonna add the same class to it that we added to our category class here. This ui-corner-all, I'm just gonna highlight that and copy it. And then down here in our datepicker, we're going to add that class to this input. And hopefully yeah, there we go, it rounds off the corners and it looks like all the rest. Okay, so let's jump down to our JavaScript and let's talk about some options for this. When we ask when the applicant can start, we obviously don't want them to enter a date that's before today, before the current date. That wouldn't make any sense. So we're gonna use the min date and max date properties to specify the minimum and maximum date that they can enter here. So for our datepicker, if we wanna pass in some properties, remember we need to do that inside an object. So in our parentheses for datepicker, we're also gonna add curly brackets and we'll nudge our closing curly bracket down a couple of lines. And then we're gonna call the minDate, with a capital D ,the minDate property and we're gonna set this equal to a new date. When you say a new Date like this in JavaScript, you're creating a new date object that defaults to the current day. So now when we come into our datepicker, click in the text box, you can see that all of these previous dates are grayed out. Also the previous button on the month is grayed out. We can't hit the back arrow there. We can hit the forward arrow and after we move forward, then we can hit the back arrow, but once we get back to December 2016, I can't go back any further. So now I wanna set a max date. And this max date is gonna be exactly two weeks from today. Now we could do some crazy JavaScript math to add two weeks to the current date, but our datepicker actually makes this easier for us. What we can do, let's go ahead and go down to the next line and let's say maxDate:. What we can do is we can type in a string that represents the number of weeks forward we want this maximum date to be. And the way we do that, I'm just gonna type it out and then I'll explain it, is I'm gonna type, +2w. What this short hand does is it tells our datepicker that we want this to be positive, so we're looking forward two weeks plus two weeks into the future. So obviously the 2 is the number 2, the w stands for weeks and the plus stands for future. If you wanted the minDate, for example, to be two weeks ago we would say minus 2w. If you wanted it to be minus two days ago it would be minus 2d. As you can imagine minus two months would be minus 2m. And again you can look on the jQuery UI website to see all of the options that are available here and all of the shorthands that you can use for this maxDate. But let's see if it works. So let's click in our text field, and sure enough, we see the only area, the only span of time that's available to click on is anywhere in this two week range. Because we don't want somebody who can't start until three months from now, we want somebody who's able to start in the next couple of weeks. So we're able to limit that using the datepicker. Now another thing that we can do and I'm not gonna do this for now but I am going to temporarily show it to you and then we'll comment it out. One thing we can do is we can pre-populate this text field with a given date. So if we come down here under our datepicker, I'm gonna point to the same item again, start-date. And I'm gonna point to datepicker again. But this time, inside the parentheses, I'm gonna type in, inside quotation marks, the words, setDate, with a capital D in date. And then after that I'm gonna say new Date. So as we've already talked about this new Date, creates a new JavaScript object, a Date object with the current day as the default. And as we can see it's already pre-populated this field with the current date. Now, you can use any means necessary in JavaScript to create a new date for this. But as long as you put a new Date object there, it will pre-populate it there in that text field. So that's another option that we have for us. I'm gonna go and turn that off but I'm gonna leave it there. I'll just comment it out so that you'll have access to that in your code. So that's how you use the datepicker widget. Again as you can imagine there are a lot of options for this particular widget, so I highly suggest that you go over to the jQuery UI website and check that out. Thanks for watching. And I'll see you in the next lesson.

Back to the top
Continue watching with Elements