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?
    – Pekka
    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?
    – Oded
    Commented Apr 16, 2011 at 16:37
  • 5
    Put yo script in the <head> tag, dawg.
    – Blender
    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?
    – Oded
    Commented Apr 16, 2011 at 16:38
  • @Blender - Why would that make a difference?
    – Oded
    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
4
  • how can i include it? Thank you
    – newbie
    Commented Apr 16, 2011 at 16:39
  • @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.
    – Jared Farrish
    Commented Apr 16, 2011 at 16:48
  • 14
    Why does this simple answer get 7 upvotes, and my high quality answers get 0.
    – Raynos
    Commented Apr 16, 2011 at 16:49
  • @IvoWetzel I hate you so much.
    – Raynos
    Commented Apr 16, 2011 at 16:56
7

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

Improve this answer
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
  • You forgot to untick normalize CSS in your demo!
    – Raynos
    Commented Apr 16, 2011 at 16:43
  • @Raynos - It doesn't matter for a demonstration, IMO.
    – Jared Farrish
    Commented Apr 16, 2011 at 16:44
  • @Raynos - Although I do kind've wonder why the jsfiddle folk make that default. :\
    – Jared Farrish
    Commented Apr 16, 2011 at 16:45
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
  • 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
    – The Bumpaster
    Commented Jul 11, 2018 at 11:00
2

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

Improve this answer
1
  • which anchor..?
    – Raj
    Commented Jul 19, 2020 at 10:56
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
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
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

Not the answer you're looking for? Browse other questions tagged or ask your own question.