Javascript javascript中的日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10380030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
date picker in javascript
提问by saroj
I am getting no date picker in my web page but in fiddle it is coming, what i am missing?
我的网页中没有日期选择器，但它即将到来，我错过了什么？
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>
回答by T.J. Crowder
You need to run your JavaScript code afterthe 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 afterthe MooTools include. E.g.:
您需要在 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>
There I've just moved yourscript, 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 onloadevent, which happens very late in the process; the DOM elements are there by then.
它在 jsFiddle 中工作的原因是您将 fiddle 设置为从onload事件加载 JavaScript 代码，这在过程中发生得很晚；那时 DOM 元素就在那里。
回答by Mihai Iorga
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:
如果你看过 Fiddle，你会看到：
<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 元素并且您的脚本看不到它们。
