jquery Datepicker doesn't work

Question

jquery Datepicker doesn't work in my code.

<!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="static/css/start/jquery-ui-1.8.16.custom.css"/>
    <script type="text/javascript" src="static/js/jquery-1.6.2.min.js"></script>
    <!-- here are others script i use -->
    <script type="text/javascript" src="static/js/date.js"></script>
    <script type="text/javascript" src="static/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="static/js/jquery.ui.datepicker.js"></script>



</head>


    <body>
    <div id="mainHome" >
        <!-- bla bla more code... -->

        <div id="content">

        <h1>Add new project</h1>

        <form action="" id="form2">
                <table>
        <tr>
        <td class="right">Project Title</td>
        <td><input type="text" class="textproject" name="projecttitle"/></td>
        </tr>
        <tr>
        <td class="right">Acronym</td>
        <td><input type="text" class="textproject" name="acronym"/></td>
        </tr>
        <tr>
        <td class="right">Start date</td>
       <td><input id="datepicker" type="text" class="textdate" name="startdate"  /></td>
       </tr>
       <tr>
       <td class="right">End date</td>
       <td><input  type="text" class="textdate" name="enddate"  /></td>
       </tr>
       <tr>
       <!-- other html code -->
       </table>
       </form>


        </div>

        <--! other html code -->
      </body>
      </html>

i did't put all the code. in the file .js called date.js i have:

    $(document).ready( function() {

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

i tried everything but i still doesn't work!

edit: I understand what the problem is. In addition to using the library for the calendar, I'm also using a library for an overlay effect. Depending on the order of how I include the files or does one or the other but it does not work together. This is the code:

    <script type="text/javascript" src="static/js/jquery-1.6.2.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js">/script>
<script type="text/javascript" src="static/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="static/js/date.js"></script>

Open up developer tools / firebug in whatever browser that you are using and check the console for errors. I also noticed that the name and id do not match on your input field. — dave
– dave, Commented Sep 8, 2011 at 16:48
Does browser report any error in concole? Do you have a live url that we can check out? — jribeiro
– jribeiro, Commented Sep 8, 2011 at 16:49
Errore: $("#datepicker").datepicker is not a function. this is the error in the console — Giovanni
– Giovanni, Commented Sep 8, 2011 at 18:03

Artis · Accepted Answer · 2011-09-08 16:48:11Z

3

Your order of script includes is wrong.

Put jQuery first, then put jQuery UI Custom, then put the UI core, then put the datepicker and only then put your JS file containing all the logic needed.

Then it should work.

No offence, but ain't you using a bit outdated version of jQuery? As of now the jQuery datepicker is a jQuery UI component that comes together with the UI bundle. If you downloaded the lastest jQuery UI library with the datepicker embed AND you are still trying to use some other datepicker script, you can also get conflicts regarding function names(datepicker).

answered Sep 8, 2011 at 16:48

Artis

2832 silver badges9 bronze badges

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

Comments

John Hartsock · Accepted Answer · 2011-09-08 16:49:23Z

1

You need to rearrange your Script tags. Modify the order of your script tags from this:

   <script type="text/javascript" src="static/js/date.js"></script>
   <script type="text/javascript" src="static/js/jquery.ui.core.js"></script>
   <script type="text/javascript" src="static/js/jquery.ui.datepicker.js"></script>

to this

   <script type="text/javascript" src="static/js/jquery.ui.core.js"></script>
   <script type="text/javascript" src="static/js/jquery.ui.datepicker.js"></script>
   <script type="text/javascript" src="static/js/date.js"></script>

answered Sep 8, 2011 at 16:49

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

1 Comment

Giovanni Over a year ago

i have downloaded the last version and changed the order. now i have: <script type="text/javascript" src="static/js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="static/js/date.js"> </script> but it still doesn't work

Md Amranur Rahman · Accepted Answer · 2019-04-04 11:02:40Z

-1

this same problem I face. jquery Datepicker doesn't work So try this way. it will help you.

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {        
  (function($){"use strict";
      var $window=$(window)
      var datepick=$('.date-pick')
      if($(datepick).length){$(datepick).datepicker({format:"dd/mm/yyyy"});}

  })(jQuery);    
});      
</script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>

answered Apr 4, 2019 at 11:02

Md Amranur Rahman

1,14317 silver badges30 bronze badges

Collectives™ on Stack Overflow

jquery Datepicker doesn't work

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related