Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
With the advent of HTML5, browsers are enhancing their sets of available user interface widgets. Some of these areas have some overlap with jQuery UI. We're going to take a look at one of those examples in this movie, the Date Picker. So here in Chrome, I've created an input whose type is date. This is a new type in HTML5. And in Chrome it looks like this. It starts out with a placeholder, and then I can open it up and page through the dates, skip around to various years, go back to today and so forth.
I can clear it out with that little x. So it's very handy, and using native widgets like this, if they're available on the platforms that you're developing for is a really good idea. They're going to have better accessibility through the operating system, most likely. And they'll be supported more and more in the future. This is especially the case on many mobile platforms, where they'll offer a highly customized version of this that works in say, a touchscreen environment. The Date Picker is well supported in Chrome. But, if you're working with other browsers, not even just Internet Explorer, you may have a need for a date picker, such as the one that jQuery UI provides.
So we're going to take a quick look at that. Here is another text field. This is just with the type text, with an ID called Date Picker. And if we scroll down, here's a trigger button again. And here is a very similar setup to what we used for the accordion. I'm just selecting and saving that date picker element. And then I'm calling the date picker method on it. So, when I click, nothing apparently happens. But, then when I click the field I get this nice jQuery UI Date Picker. With no options, this is what it looks like. One of the nice things about the jQuery UI widget, is that it's extendable through its options.
You're going to need to choose which one works best for your situation. If you can use the native widget, if it makes sense in the case of the project that you're working on, by all means use them. But if you can't use them, jQuery UI probably has your back.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.