13

Good day!

I am trying to use jquery for the first time. And i cannot make it work. My code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </script>
    <div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
    </div><!-- End demo -->
</body>
</HTML>

But the datepicker is not working.. What should i do to make it work? Thank you.

Improve this question
6
  • 6
    "Does not work" is not a sufficient error description. What does not work? What happens? Commented Apr 16, 2011 at 16:37
  • 1
    "cannot make it work" is a terrible problem description. What doesn't work? What do you expect to happen the doesn't? What errors come up on the javascript console? Commented Apr 16, 2011 at 16:37
  • 5
    Put yo script in the <head> tag, dawg. Commented Apr 16, 2011 at 16:38
  • Regardless - where is .datepicker() defined? I don't see that function anywhere. Are you missing an additional javascript file reference? Commented Apr 16, 2011 at 16:38
  • @Blender - Why would that make a difference? Commented Apr 16, 2011 at 16:39

8 Answers 8

Reset to default
31

You did not include the datepicker library

so add 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

to your <head> tag

live demo

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

how can i include it? Thank you
@newbie - Make sure and click the outline checkmark next to the answer you used. This would be right below the vote tally for the answer.
Why does this simple answer get 7 upvotes, and my high quality answers get 0.
@IvoWetzel I hate you so much.
7

Datepicker is not part of jQuery. You have to get jQuery UI to use the datepicker.

Improve this answer

Comments

7

The problem is you are not linking to the jQuery UI library (which is where datepicker resides):

http://jsfiddle.net/5AkyC/

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
    <div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
    </div><!-- End demo -->
</body>
</HTML>
Improve this answer

3 Comments

You forgot to untick normalize CSS in your demo!
@Raynos - It doesn't matter for a demonstration, IMO.
@Raynos - Although I do kind've wonder why the jsfiddle folk make that default. :\
5

I was stuck on an issue where datepicker() appeared to be doing nothing. It turned out that the issue was that the input was inside a Bootstrap "input-group" div. Simply taking the input out of the input-group resolved the issue.

Improve this answer

1 Comment

Yes, this is an odd issue. I tried to wrap my inputs in groups, for some weird reason, the datepicker would not init on focus when it has input-group class
2

For me.. the problem was that the anchor needs a title, and that was missing!

Improve this answer

1 Comment

which anchor..?
2

after that all html we want to write these lines of code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all">



<script>
$('#date').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    yearRange: "-100:+0",
    dateFormat: 'dd/mm/yy'

});
</script>
Improve this answer

Comments

2

If jQuery UI datepicker isn't working but it used to work on similar DOM earlier, try removing all the classes and try binding it to just a simple input with its id. In my case a class was interfering with it and preventing the date picker to appear.

Improve this answer

Comments

1

try adjusting the order in which your script runs. Place the script tag below the element it is trying to affect. Or leave it up at the top and wrap it in a $(document).ready() EDIT: and include the right file.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.