CODEWITHSUNDEEP
javascriptdatedatepickermootools
saroj
saroj

Reputation: 653

date picker in javascript

I am getting no date picker in my web page but in fiddle it is coming, what i am missing?

http://jsfiddle.net/cBwEK/

It is coming fine in fiddle but i am getting nothing in my web page. I have written below scripts

The whole source code is here: http://www.monkeyphysics.com/mootools/script/2/datepicker

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>     
    <script type="text/javascript" src="datepicker.js"></script>      
    <script type="text/javascript" src="mootools-yui-compressed.js"></script>
    <script type="text/css" src="datepicker.css"></script>        
    <script type="text/javascript">           
        new DatePicker('.picker', {
            pickerClass: 'datepicker ',
            allowEmpty: true
        });           
    </script>        
 </head>
 <body>
     <label>Datepicker starting at and allowing no value:</label>
     <input name='date_allow_empty' type='text' value='' class='date picker' />
 </body>
</html>

Upvotes: 2

Views: 52186

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074038

You need to run your JavaScript code after the relevant elements exist in the DOM. Just move the script to the end of the page. Also, if the date picker script relies on MooTools, you need to put the datepicker include after the MooTools include. E.g.:

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>     
    <!-- FIRST CHANGE HERE, swapping the order of the script elements -->
    <script type="text/javascript" src="mootools-yui-compressed.js"></script>
    <script type="text/javascript" src="datepicker.js"></script>      
    <link type="text/css" rel="stylesheet" href="datepicker.css">
 </head>
  <body>
   <label>Datepicker starting at and allowing no value:</label>
   <input name='date_allow_empty' type='text' value='' class='date picker' />
   <!-- SECOND CHANGE HERE, moving your script to *after* the elements it operates on -->
   <script type="text/javascript">           
            new DatePicker('.picker', {
     pickerClass: 'datepicker ',
     allowEmpty: true
     });           
   </script>        
  </body>
</html>

Live copy | source

There I've just moved your script, but you might move all the scripts down there as the YUI people suggest.

The reason it works in jsFiddle is that you have the fiddle set to load the JavaScript code from the onload event, which happens very late in the process; the DOM elements are there by then.

Upvotes: 4

Mihai Iorga
Mihai Iorga

Reputation: 39704

Try to load the the DatePicker Initialization after the page load.

A good programmer always use View Source

If you would have seen Fiddle you would see:

<script type='text/javascript'>
    window.addEvent('load', function() {
        new DatePicker('.picker', {
             pickerClass: 'datepicker ',
            allowEmpty: true
        });
    });
</script>

That's because the HTML elements are not loaded and your scripts don't see them.

Upvotes: 2

Related Questions