jQuery datepicker doesn't work

Question

I can't get the jQuery datepicker to work. I have followed everything from the jQuery UI manual. Can you please check my code below?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link type="text/css" href="js/jquery_theme/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>

<script language="javascript">
$(function() {

 $("#test_input").datepicker();

});
</script>

</head>

<body>
<input type="text" name="test_input" id="test_input" />
</body>
</html>

Thank you for your time :)

by the way, it works when I change the tag into:
but I wouldn't know how to get the selected date value using that. (i got that technique from the jQuery UI website also) — Obay, Oct 20 '09 at 20:33
I solved this by replacing the old jQuery.js file with the newly downloaded one bundled with the UI js files. — Obay, Oct 20 '09 at 21:56

score 3 · Accepted Answer · answered Oct 20 '09 at 20:45

3

Correct your <script> tag. You can then handle the returned date like this:

<script type="text/javascript">
  $(document).ready(
      function() {
          $('#input_test').datepicker(
              {
                  onClose: function(dateText, inst) {
                          alert("My date is: " + dateText);
                      }
              }
          );
      }
  );
</script>

answered Oct 20 '09 at 20:45

Alex Bagnolini

21,990
3
41
41

i think i got it! i changed "input_test" to "test_input" (lol :P) then i used the
technique and changed "onClose" in your script to "onSelect" ;) thanks man!
– Obay Oct 20 '09 at 21:10

score 0 · Answer 2 · answered Oct 20 '09 at 20:43

0

Try placing your tag at the bottom of the page (after the body tag), or do this

 $(document).ready( function() {

   $("#test_input").datepicker();

 });

The javascript gets interpreted before the input(#test_input) tag is loaded into the dom, so that might be the problem.

answered Oct 20 '09 at 20:43

Rishav Rastogi

15,484
3
42
47

1

Code inside `$(document).ready( function() { ... } );` gets executed when the page has finished loading, despite its position inside it. – Alex Bagnolini Oct 20 '09 at 21:39
1

i know, thats why the 'or' in my answer – Rishav Rastogi Oct 20 '09 at 21:52
3

He actually is using the shortcut to the document.ready function already. If a function is passed into the jQuery object, it automatically waits until the document is ready to run it. $(function(){ /* the document is ready */ }); – Alex Sexton Oct 20 '09 at 22:06

jQuery datepicker doesn't work

2 Answers2