I am getting no date picker in my web page but in fiddle it is ing, what i am missing?
/
It is ing fine in fiddle but i am getting nothing in my web page. I have written below scripts
The whole source code is here:
<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-pressed.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>
I am getting no date picker in my web page but in fiddle it is ing, what i am missing?
http://jsfiddle/cBwEK/
It is ing 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./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-pressed.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>
- Try loading mootools before the datepicker script. – Joseph Commented Apr 30, 2012 at 7:34
2 Answers
Reset to default 4You 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-pressed.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.
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.