jQuery UI is collection of commonly used user interface widgets that responds to user initiated events and provides prebuilt themes and easily maintainable custom themes. It is built on top of the jQuery JavaScript library. jQueryUI can be downloaded from http://jqueryui.com/download/.

This tutorial show you how to use the widgets available in the jQuery UI library for building jQuery UI datepicker.

FOUR STEPS TO BUILD JQUERY UI DATEPICKER WIDGET :

1. Add jquery-ui css cdn to the html document
2. Add to the jquery cdn to the html document
3. Add to the jquery ui js cdn to the html document
4. Make file named "date.html" with given code.

STEP ONE: Add jquery-ui css cdn to the html document

STEP TWO: Add to the jquery cdn to the html document

STEP THREE: Add to the jquery ui js cdn to the html document

STEP FOUR: Make file named "date.html" with given code.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script> $(document).ready(function(){ $("#datepicker").datepicker(); }); </script>
</head>
<body>
Date: <input type="text" id="datepicker" />
</body>
</html>

EXAMPLE : Date:

No comments:

Post a Comment