How to Link Jquery UI to CSS and HTML file

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:

jquery ui css link

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.

Leave a Reply