jQuery UI Basics: How to use date picker widget?
Question
This is the first time I am using html and JS so please be gentle.
I want to use the Datepicker widget from jQuery UI as shown here in the Getting Started page.
I think I am making some mistake in linking my html and JS files. This is what I have:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<input type="text" name="date" id="date">
</body>
</html>
(I have downloaded the jquery files locally as instructed.)
and
index.js
$( "#date" ).datepicker();
But when I open index.html in a web browser and click on the textbox, I don't see the calendar date picker popout as shown on the Getting Started page.
Please tell me what I'm doing wrong. This is the first time I'm attempting Html/JS stuff and I'm really frustrated.
1 answers
solution1
0 ACCPTED 2017-09-18 21:10:54
your datepicker code should be like below
$(document).ready(function(){
$( "#date" ).datepicker();
});
you have to put this code inside index.js file. If your other file locations are correct then it should work.It's always recommended to put all jquery related code which uses the DOM elements to put inside $(document).ready() such that the code executes once the DOM is ready and all the elements are available.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.