CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
Mark
Mark

Reputation: 55

jQuery datepicker - code won't work?

New to jQuery. I cannot get the datepicker to work. Can anyone tell my what I am doing wrong? Thank you, any help is appreciated. Here is the skeleton code:

<html>
	<head>
		<title>Example</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<script>
			$(function() {
				$("#quoteDate").datepicker();
			});
		</script>
	</head>
	<body>
		<input type="text" id="quoteDate">
	</body>
</html>

I have looked at many posts almost identical to this one, but none of the answers worked. I have also downloaded the jQuery UI files to reference them locally, but that wouldn't work either.

Upvotes: 1

Views: 1350

Answers (2)

mythicalcoder
mythicalcoder

Reputation: 3291

After reading the above answers and your comments, it seems that you are unable to run it locally on your browser.

Referencing Files Locally
Easiest way is to download and keep all the files in same directory. Let's say the files are index.htm, jquery-ui.css, jquery-1.10.2.js, jquery-ui.js

File : index.htm 

<html>
<head>
    <title>Example</title>

    <link rel="stylesheet" href="jquery-ui.css">
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui.js"></script>
    <script>
        $(function() {
            $("#quoteDate").datepicker();
        });
    </script>
</head>
<body>
    <input type="text" id="quoteDate">
</body>
</html>

Relative Path
You can give relative path such as
src="js/jquery-1.10.2.js"
src="js/jquery-ui.js"
href="css/jquery-ui.css" if the directory structure is : 

Present Working Directory
    index.htm
    js (directory)
        jquery-1.10.2.js
        jquery-ui.js
    css (directory)
        jquery-ui.css

Upvotes: 1

Andy Fleming
Andy Fleming

Reputation: 7865

They aren't working for you locally because you are running them from a file with a url like file:///Macintosh HD/whatever....

You need to change the lines:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

to:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

When you use a // prefix for an asset, it matches whatever protocol you are using. So when you load up something locally (without using a local web server), it looks for file:///code.jquery.com/jquery-1.10.2.js which doesn't exist. Changes the assets to start with http:// or https:// instead of //.

Upvotes: 2

Related Questions