CODEWITHSUNDEEP
jquery-uijquery-ui-datepicker
Ace
Ace

Reputation: 664

jQuery datepicker does not work as advertised

Problem: datepicker is not showing up at all. No errors in the console. All files are included and accessible via Firebug.

After spending way too much time trying to get the jQuery UI datepicker to work, and that includes reading through dozens of Google results, I need your help. Not even the simplest, plain, straightforward implementation of the datepicker is working for me.

Current example I'm testing (stripped down to nothing but the datepicker):

<html>
<head>
<meta charset="UTF-8">
<title>DatePicker Test</title>

<!-- JavaScript -->
<script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.19.custom.min.js"></script>
<!--script type="text/javascript" src="../js/jquery/jquery.ui.datepicker.js"></script-->

<!-- Stylesheets -->
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.19.custom.css" />

<script type="text/javascript">
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
</head>

<body>
<div><input type="text" id="datepicker" class="hasDatepicker" /></div>
</body>
</html>

This does NOT work. I've downloaded the entire jQuery UI code (jquery-ui-1.8.19.custom.min.js) and tried everything. I've even tried to add a simple datepicker field to the demo HTML page that comes with jQuery UI. Nothing.

Then I downloaded the developer bundle of jQuery UI, and tried just the datepicker.js with jQuery, but even that failed.

So although I get no errors, and I can see my selector in the code and through calling it up from the console, I just get plain old nothing.

Then I've tried numerous CSS modifications that have been posted in several forum posts, moved my JavaScript from the top to the bottom, after the datepicker . . . and all kinds of mutations, but nothing has worked.

Is it me?

Certainly, it's possible for others to use the datepicker plug-in, what am I doing wrong?

Upvotes: 3

Views: 2038

Answers (2)

mlantz
mlantz

Reputation: 113

Hey so I looked into your issue. I suggest removing the class declaration in the input that helped me. Also make sure your script links are correct. You are currently asking them to pull from a folder that comes before your current page. If the page and css/js folders are in the same directory you can remove the "../" at the front. 

<input type="text" id="datepicker" />

A helpful add-on in FireFox are the Web Developer tools

Upvotes: 6

stevebot
stevebot

Reputation: 24005

Check out this js fiddle here for a working example. It's pretty similar to what you are doing minus the class on the input field, aswell as in this case the example is using CDN's.

You must have something wrong (maybe a script or css isn't getting sourced).

Upvotes: 0

Related Questions