Jquery UI CSS link
This article will show how to link jQuery UI to CSS or HTML. Before you can connect jqueryui, you need to download jquery, I have told you how to download jquery ui in a previous article.
Step-by-step guide to link jQuery UI
1. Create a new folder with the name jQueryUI Demos
2. Create a folder with the name jquery-UI with the jQueryUI Demos. And within this folder, we should put the necessary folders and files of the jquery-ui library.
3. Copy and paste the below-mentioned files and folder from jquery-ui-1.13.3 folder to jquer-ui folder
- external folder
- images folder
- jquery-ui-min.css file
- jquery-ui.min.js file
4. Create and save a new HTML document with the name default.html in the jQueryUI Demos folder
5. Link the necessary jquery ui library CSS and JavaScript files to default.html document
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>t/css/">
6. Call jQuery UI function on HTML elements
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div id="datepicker"></div>
<script type="text/javascript">
$("#datepicker").datepicker();
</script>
</body>
</html>
Output:
The above code creates a div with the ID name “date picker”.
We need to convert the div to an actual date picker. For that, we take the help of the jquery function.
In the <script> tag, We select “date picker” with the help of the jquery ID selector. Then we use date picker() method to display the date.