FREELessons: 7Length: 42 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Date Dropper

The Date Dropper jQuery plugin makes it very easy to create user-friendly date pickers from text fields. In this lesson, I will demonstrate how to get it working.

Relevant Links

1 lesson, 00:36

Welcome to the Course

2.JavaScript UI Plugins
5 lessons, 40:27


Date Dropper



Medium Lightbox

1 lesson, 00:37

Final Thoughts

2.2 Date Dropper

Hello and welcome back. In this lesson, we're gonna take a look at the date dropper plugin for jQuery. It's a very simple but very nice looking date selector. All you have to do is to create an input field, and then apply this date dropper plugin to that input field in order to give us this nice, little plugin. So we can change our day here, we can change our month just by clicking around. And once we select a date, we can just click outside and it will be selected for us. Now, you'll notice that this particular one has some other options. If we click on these arrows here, it will expand it out to a large calendar view. And we can select a date from that and it will update the date accordingly, as well. So you can find the URL for this plugin in the course notes for this lesson. And if we scroll down a little bit, you'll notice a download link shows up, up here at the top, and that will allow you to download the plugin to your system. And we're basically gonna start from scratch in a new folder. And we're gonna save this in the project files folder when we're done, we're gonna save this in the 02_DateDropper folder. Now, you'll notice I've already pulled the plugin into this folder, Datedropper3-master. And if we go into that, we can see some JavaScript and CSS and then an SRC folder. But I'm gonna go back out to the project files folder, I'm gonna right-click on the 02_Datedropper folder, and I'm going to open that folder with code. And I'm just gonna create an index file here that we're going to use. So I'm going to right-click here and create a new file, I'm just gonna call it index.html. And then I'm gonna use some HTML5 shorthand to fill out some of that document. And then I'll change the title here to DateDropper. And we're gonna keep this pretty simple. One thing I'm gonna do is, I'm gonna copy some styles that I have in another file. I'm just gonna copy those over here. There's not much. We're just setting the font family for the body. We're gonna do a text-align: center on the container class, and then we're doing some light styling on input fields. So then inside the body, I'm gonna create a div with a class of container. And inside that div I'm gonna create an h1 and that h1 is simply gonna say Hello World. And then below that div, I'm gonna have an input. So we're gonna create an input field here, input type="text". Now, let's give it an id. We're gonna enter a date here, so I'm just gonna say, myDate and then we'll just leave it at that for now. So we have our input field, we have our h1, and now we need to include some files here. So first of all, in the Datedropper3 master folder, we have a CSS file that we want to include. And that's this datedropper.min.cs. So we're gonna come back up to the head of our document, maybe just above our title tag. And we're gonna create a Link tag and for the href I'm gonna point to the datedropper3-master folder. And in that folder I'm gonna point to datedropper.min.css. So that'll be our link tag for our style sheet. And then at the bottom of our document, just inside the closing body tag, I'm going to create a couple of script tags. And I'm just gonna go ahead and copy and paste these, as well. So you'll see that we're first linking to jQuery, and you can find the link for that here in this file. And then after we link to jQuery we're linking to the datedropper.min.js file that's inside the datedropper3-master folder. And then once we've got all of our files included, after that last script tag we're gonna create an empty script tag that we're gonna put some of our own JavaScript in. So I'm gonna start by creating our jQuery document ready function here. And then inside this document ready function, in order to get this date dropper to work, it's very, very simple. We just need one simple line of JavaScript. And what we're gonna do, is we're gonna point to our input that we want to apply this date dropper to. Which is this input here with the id of my date. So let's point to that in jQuery. We'll point to #myDate. And then after the closing parenthesis there, we're simply gonna say .date, and then Dropper with a capital D, open close parentheses, semicolon to end our statement. And that's all we need to get that plugin to work. So let's save our HTML file here. I'm gonna right-click on our HTML file, and view it in Explorer, and then I'll double-click on it to open it up in our browser. So here we see our h1 tag, and below it we see our input, and by default, it has today's date in it. Now, if I click inside this input, you'll see we get this really nice drop down. We had to do very little to get this to work, and we can change our date. And we change all three of those fields, click on the check mark, and it applies that date to our text field. Now, we do have some other options that we can include as data attributes on our text field. So let's say that we wanted to be able to see this in another language. Let's say we wanted it in Italian. So let's jump back into our index study HTML file. And for our input I'm gonna create a data attribute called data-lang for data language. And then we would put our two digit language code here, for English it would be en, for Spanish it would es. And if we were to say that, we could see it in Spanish. When we click on it, you'll see we have Spanish names for the days of the week, same thing for the months. So all of our months are in Spanish as well. There we go, we could also change it, as I mentioned before, to Italian using it. Save that and refresh, and then click here. Now we see Italian names for our calendar. Another option that we have is the option to view the full calendar mode. And that is easily accessed using a data attribute called data-large-mode and setting that equal to true. So if we save that and then refresh, when we click inside our input field, it still looks the same, but now we have this extra button on it. And if we click that button it gives us a nice little animation and expands out our view to this full calendar view. And we can cycle through different months, click on a date, and it will select that date for us. Now, we can also set it up so that it goes to this view by default. Now, remember, if we were to refresh our page and click in our input, by default it goes to the small view. And we have to click here to get it to go to the large view. Well, if we want it to default to that large view, we can add another data attribute here called data-large-default. Now, if you're going to use data-large-default, you need to make sure you're also setting data-large-mode to true, otherwise it won't work. So we're gonna set data-large-default to true, as well. And when we save that and refresh our page, you'll notice that when we click in our input, it will default to the large calendar view. So those are just a few options that you have available to you with this date dropper plugin. And as always you can jump over to the website, click on the docs link. And get some more information about the other customization options that you have. So thank you for watching, and I'll see you in the next lesson.

Back to the top