javascript中的日期选择器答案

【问题标题】：date picker in javascriptjavascript中的日期选择器
【发布时间】：2012-04-30 07:32:02
【问题描述】：

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

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

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

【问题讨论】：

尝试在日期选择器脚本之前加载mootools。

标签： javascript date datepicker mootools

【解决方案1】：

您需要在 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>

Live copy | source

我刚刚移动了你的脚本，但你可以将所有脚本移到那里as the YUI people suggest。

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

【讨论】：

感谢 T.J 的回答，但我仍然没有得到日期选择器，我添加了您的代码但同样的问题，我需要将所有脚本移动到正文部分的末尾，除了 motools 脚本？
@saroj：是的，我只是注意到在做一个活生生的例子时（我现在已经添加到答案中了）。很高兴有帮助。
只需要一个解决方案是在显示天数的同时让我们说六月月份，还显示可能的某些天数和七月的某些天数，我不想显示，我只想显示六月天，怎么办？
是的，我问了另一个问题：stackoverflow.com/questions/10381454/…
....任何解决方案请：stackoverflow.com/questions/10397240/…

【解决方案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 元素未加载，您的脚本看不到它们。

【讨论】：