2

我的网页中没有日期选择器，但它即将到来，我错过了什么？

http://jsfiddle.net/cBwEK/

它在小提琴中很好，但我在我的网页中什么也没有。我写了下面的脚本

整个源代码在这里：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>
4

2 回答 2

4

您需要在 DOM 中存在相关元素后运行 JavaScript 代码。只需将脚本移动到页面末尾即可。此外，如果日期选择器脚本依赖于 MooTools，您需要将日期选择器包含在 MooTools 包含之后。例如：

<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>

现场复制| 来源

我刚刚移动了您的脚本，但您可以按照 YUI 的建议将所有脚本移到那里。

它在 jsFiddle 中工作的原因是您将 fiddle 设置为从onload事件中加载 JavaScript 代码，这在过程中很晚才发生；到那时，DOM 元素就在那里。

于 2012-04-30T07:35:14.567 回答
2

尝试在页面加载后加载 DatePicker 初始化。

A good programmer always use View Source

如果您看过 Fiddle，您会看到：

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

那是因为没有加载 HTML 元素并且您的脚本看不到它们。

于 2012-04-30T07:37:11.130 回答