date picker not appearing after clicking on image

问题

I have a fiddle which displays date picker. same code i have written below but nothing happens, what wrong i am doing? When i click on that green colour then no date picker is generated, but in fiddle it is coming fine, where i am doing wrong?

http://jsfiddle.net/cBwEK/10/

  <html>
   <head>
 <script type="text/javascript" src="mootools-yui-compressed.js"></script>//mootools script  
    <script type="text/javascript" src="datepicker.js"></script>     
    <link rel="stylesheet" type="text/css" href="datepicker.css" />

   </head>
   <body>

  <input name='date_allow_empty' type='text' value='' class='date picker' />
  <div id="invokeDP"></div>

      <script type="text/javascript">           
       var dp = new DatePicker('.picker', {
  pickerClass: 'datepicker ',
  allowEmpty: true,
  toggleElements: ['invokeDP']
  });    
     </script>  

   </body>
</html>

EDIT: I have taken all scripts inside head section, previously these scripts were in body section

回答1:

I think you miss a mootools core library.

<script src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>

Here is my working solution http://jsbin.com/unosar/4/edit#source (click at Render button to preview)

回答2:

Your CSS isn't being detected because you have your link in the body. If I remove the CSS from your fiddle, it doesn't display at all:

http://jsfiddle.net/cBwEK/11/

Try moving this to the head tag along with your script elements. I've also changed your comment block to the correct HTML syntax:

<head>
   <script type="text/javascript" src="mootools-yui-compressed.js"></script><!-- mootools script -->
   <script type="text/javascript" src="datepicker.js"></script>     
   <link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
   .......

Also, your class for the input is date picker. Looking at your mootools script, this should be datepicker.

来源：https://stackoverflow.com/questions/10397240/date-picker-not-appearing-after-clicking-on-image

标签

javascript

date

datepicker

mootools