jQuery UI Tutorial for Beginners – Step by Step Guide!
Previously, we learned how to use jQuery to add some interactivity to our web pages. This time, are you getting started with jQuery UI? You've come to the right place!
This step by step tutorial aims to give you a head start in using jQuery UI. You probably know what jQuery is so you want to take a beautiful step forward with jQuery UI, and that's awesome!
jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is a perfect choice.
For me, Bootstrap and jQuery UI look good together. It also allows us to choose from different themes available, you can even create your own theme! But this post only covers running a very simple jQuery UI script in your web browser.
Run jQuery UI in 6 Easy Steps
The following steps below will make an awesome date picker with jQuery UI. Let's code!
Prepare your HTML file with just its basic structure.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Add a text box inside the tag.
Users will be able to click this and show a jQuery UI calendar picker later.
<input type="text" id="myDatepicker" placeholder="Click to pick date" />
Add the jQuery library before the ending tag.
This is because jQuery UI is built on top of the jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Add the jQuery UI library under the code of step 3.
This is actually the first step in enabling jQuery UI on your page.
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI theme via CSS external link
Put it inside the tag, after the tag. This CSS will make our UI stylish.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />
Enable jQuery UI date picker to our text box on Step 1.
Add the following code under the code of step 5. This is how you make a simple text box to an awesome jQuery UI date picker.
<script>
$( "#myDatepicker" ).datepicker();
</script>
Quick Tip: Always use the minified version. For instance, use jquery-ui.min.css instead of just jquery-ui.css
Continue to read below, you will see the complete code of the steps above.
jQuery UI Sample Codes
You will have to click the text box saying "Click to pick a date" to see jQuery UI with different themes in action.
By the way, examples 2.1 and 2.2 uses Google's content delivery network to run jQuery UI, meaning you won't have to download the jQuery and jQuery UI library, you just have to include it.
Query UI with Smoothness theme hosted in Google CDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tutorial for Beginners - smoothness theme - by codeofaninja.com</title>
<!-- step 4 - include you jquery ui theme -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />
</head>
<body>
<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />
<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- step 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>
</body>
</html>
jQuery UI with Vader theme hosted by Google too.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tutorial for Beginners - vader theme - by codeofaninja.com</title>
<!-- step 4 - include you jquery ui theme -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/vader/jquery-ui.min.css" />
</head>
<body>
<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />
<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- step 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>
</body>
</html>
What if I don't want a CDN? I want to host my own jQuery UI library? No problem, you can always go to the jQuery UI download builder, you just have to select your preferred theme using the dropdown at the lower part of the page.
jQuery UI library is self-hosted in the example code below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tutorial for Beginners - vader theme - by codeofaninja.com</title>
<!-- step 4 - include you jquery ui theme -->
<link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/le-frog/jquery-ui-1.10.3.custom.min.css" />
</head>
<body>
<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />
<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- step 3 -->
<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>
</body>
</html>
Download Source Code
You can download all the codes used in this tutorial for only $9.99 $5.55!
[purchase_link id="12401" text="Download Now" style="button" color="green"]
Online Resources
Want to see more of jQuery UI? You can always visit:
What’s Next?
Up Next: Learn PHP and MySQL CRUD Tutorial for Beginners - Build a simple web application with PHP and MySQL database.
Related Tutorials
Some Notes
What students say?
Don't just take our word for it. See what our students have to say about our tutorials and source codes. We are proud to have helped many individuals and businesses to build their own applications. Here are a few of the testimonials from our satisfied students.
★★★★★ “Wow, I love you guys! The best web programming tutorial I’ve ever seen. So comprehensive, yet easy to follow. I love how you combine all necessary elements in such a neat structure.” ~ Olaug Nessa
★★★★★ “The fact that you’ve put it all together saves so much time and its worth buying the code. Makes me feel good supporting a developer like yourself. Keep up the good work!” ~ Dan Hudson
★★★★★ “Thanks for making these awesome tutorials! I bought your source codes. To be honest, it’s very readable code and helps me understand a lot of things and how it’s done in PHP. Thanks for that again.” ~ Michael Lammens
★★★★★ “Hey Mike, my name is Leonardo from Argentina. I’ve been reading your blog since like 4 months from now, and I really must say: your tutorials are very good, they has helped me in many of my works… Well, thank you very much man. I really admire your work.” ~ Leonardo
★★★★★ “Words can’t express how grateful I am for the work and the articles you post, had some troubles with doing somethings but your articles as per usual hit the hammer right on the head. They are a great way for expanding upon later too!” ~ Jeremy Smith
Got comments?
At codeofaninja.com, we strive to provide our readers with accurate and helpful jQuery UI Tutorial for Beginners – Step by Step Guide! Your feedback is essential in helping us achieve this goal.
If you have encountered any issues with the code, have suggestions for improvement, or wish to provide praise, we welcome you to leave a comment below. Please be as descriptive as possible to address your concerns effectively and include any relevant error messages, screenshots, or test URLs.
We request that comments remain on-topic and relevant to the article above. If your question or comment pertains to a different topic, we recommend seeking assistance elsewhere.
Furthermore, we ask that you review our code of conduct before commenting to ensure that your feedback is constructive and respectful.
Thank you for taking the time to provide feedback and for supporting codeofaninja.com. Your contributions help us improve our tutorials and serve the developer community better.
Subscribe for FREE!
Improve your web development skills and stay ahead of the competition by subscribing to our tutorial series. Sign up for FREE and access exclusive, cutting-edge content delivered straight to your inbox.
Take advantage of the chance to elevate your skills and advance your web development career. Subscribe now.
Thank You!
We hope you've found our jQuery UI Tutorial for Beginners – Step by Step Guide! helpful and informative. We understand that learning new programming concepts can be challenging, but we're glad we could make it easier for you.
Thank you for choosing to learn with us and for supporting codeofaninja.com! Consider sharing this tutorial with your friends and colleagues who may also be interested in learning about jQuery UI Tutorial for Beginners – Step by Step Guide!
The more people know about our tutorials, the more we can help the developer community grow. Keep learning, keep coding, and keep growing as a developer. We can't wait to see what you'll create next!
Thanks for reading our jQuery UI tutorial for beginners!
Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.