JQuery datepicker not working

Question

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.

"Does not work" is not a sufficient error description. *What* does not work? What happens? — Pekka, Apr 16 '11 at 16:37
"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, Apr 16 '11 at 16:37
Regardless - where is `.datepicker()` defined? I don't see that function anywhere. Are you missing an additional javascript file reference? — Oded, Apr 16 '11 at 16:38
@Blender Okay. I'll put it on the . Is it the standard? Thank you — newbie, Apr 16 '11 at 16:43

score 31 · Accepted Answer · edited Feb 16 '17 at 16:12

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

edited Feb 16 '17 at 16:12

ahmed hamdy

5,096
1
47
58

answered Apr 16 '11 at 16:38

Raynos

166,823
56
351
396

how can i include it? Thank you – newbie Apr 16 '11 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 Apr 16 '11 at 16:48
14

Why does this simple answer get 7 upvotes, and my high quality answers get 0. – Raynos Apr 16 '11 at 16:49
@IvoWetzel I hate you so much. – Raynos Apr 16 '11 at 16:56

score 7 · Answer 2 · answered Apr 16 '11 at 16:38

7

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

answered Apr 16 '11 at 16:38

Peter Olson

139,199
49
202
242

score 7 · Answer 3 · answered Apr 16 '11 at 16:41

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>

answered Apr 16 '11 at 16:41

Jared Farrish

48,585
17
95
104

You forgot to untick normalize CSS in your demo! – Raynos Apr 16 '11 at 16:43
@Raynos - It doesn't matter for a demonstration, IMO. – Jared Farrish Apr 16 '11 at 16:44
@Raynos - Although I do kind've wonder why the jsfiddle folk make that default. :\ – Jared Farrish Apr 16 '11 at 16:45

score 5 · Answer 4 · answered Nov 08 '16 at 17:50

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.

answered Nov 08 '16 at 17:50

Mike Gostomski

138
2
8

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 Jul 11 '18 at 11:00

score 2 · Answer 5 · answered Mar 28 '14 at 07:00

2

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

answered Mar 28 '14 at 07:00

bcm

5,470
10
59
92

which anchor..? – Raj Jul 19 '20 at 10:56

Ambala Chandrashekar · Answer 6 · 2016-08-18T06:11:52.370

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>

score 2 · Answer 7 · answered Jan 07 '19 at 19:16

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.

answered Jan 07 '19 at 19:16

Mohd Abdul Mujib

13,071
8
64
88

score 1 · Answer 8 · answered Apr 16 '11 at 16:38

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.

answered Apr 16 '11 at 16:38

Michael Jasper

7,962
4
40
60

JQuery datepicker not working

8 Answers8

Linked