JavaScript中的日期选择器

Question

I am getting no date picker in my web page but in fiddle it is coming, what i am missing? 我的网页上没有日期选择器，但在拨弄它时，我缺少了什么？

http://jsfiddle.net/cBwEK/ 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 整个源代码在这里： 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>

Answer 1

You need to run your JavaScript code after the relevant elements exist in the DOM. 在DOM中存在相关元素之后，您需要运行JavaScript代码。 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. 此外，如果日期选择器脚本依赖于MooTools的，你需要把日期选择器包括后 MooTools的包括。 Eg: 例如：

<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 . 我刚刚将您的脚本移到了那里，但是您可能会按照YUI的建议将所有脚本移到那里。

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; 它在jsFiddle中起作用的原因是您设置了小提琴来从onload事件中加载JavaScript代码，该过程很晚才发生。 the DOM elements are there by then. 届时，DOM元素就在那里。

Answer 2

Try to load the the DatePicker Initialization after the page load. 尝试在页面加载后加载DatePicker初始化。

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. 这是因为未加载HTML元素，并且脚本看不到它们。

JavaScript中的日期选择器

问题描述

2 个解决方案

解决方案1
4 已采纳 2012-04-30 07:35:14

解决方案2
2 2012-04-30 07:37:11

JavaScript中的日期选择器

问题描述

2 个解决方案

解决方案1 4 已采纳 2012-04-30 07:35:14

解决方案2 2 2012-04-30 07:37:11

解决方案1
4 已采纳 2012-04-30 07:35:14

解决方案2
2 2012-04-30 07:37:11