Datepicker 在 html 中不起作用 [关闭]答案

【问题标题】：Datepicker not working in html [closed]Datepicker 在 html 中不起作用 [关闭]
【发布时间】：2014-06-13 19:00:43
【问题描述】：

此代码不起作用。我不知道我需要添加什么资源。我在这里关注 Datepicker 的链接：http://jsfiddle.net/rMhVz/1030/ 我的代码在下面。我真的需要让它工作。我很感激任何帮助。提前致谢。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"></link>
<link rel="stylesheet" href="/resources/demos/style.css"></link>
<style type="text/css">
.event > a { 
    background-color: gray !important;
    background-image:none !important;
}
</style>
<script>
// hookup jquery ready function
$(document).ready(function () {
    var Event = function(text, desc) {
        this.text = text;
        this.desc = desc;
    };

    var events = {};
    events[new Date("07/06/2014")] = new Event("hello world test 1");
    events[new Date("08/8/2014")] = new Event("hello world test 2");
    events[new Date("09/26/2014")] = new Event("hello world test 3");

    $("#dates").datepicker({
        beforeShowDay: function(date) {
            var event = events[date];
            if (event) {
                return [true, 'event', event.text];
            }
            else {
                return [true, '', ''];
            }
        },
        onSelect: function(dateText) {
            var event = events[new Date(dateText)];
            if (event) {
                alert(event.text + "\n" + event.desc);
            }
        }
    });
});
</script>
</head>

<body>
    <div id="dates"></div>
</body>
</html>

【问题讨论】：

你需要包含jQuery，并且在jQuery UI之前包含它。您还需要将代码移动到文档末尾或将其包装在文档就绪调用中。
在 jQuery UI 之前包含对 jQuery 的引用。
感谢您的回复。您能否编辑上面的代码以包含该更改。我不知道该怎么做。非常感谢您的帮助。感谢您的宝贵时间。
@j08691 你能复制/粘贴上面的代码，让我知道现在有什么问题吗？
你的所有脚本都在 $(document).ready(function(){ } 的 {} 中，所以它会像这样

标签： javascript jquery html jquery-ui-datepicker

【解决方案1】：

实际上，我不认为脚本加载顺序是唯一的问题。您正在使用不兼容的 jQuery 和 jQuery UI 版本。您的代码在调用 $.browser.msie 时中断。 $.browser 在 jQuery 1.9 中被移除。

jquery.ui 中的错误来源：

html += buttonPanel + ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ? '<iframe src="javascript:false;" class="ui-datepicker-cover" frameborder="0"></iframe>' : '');

尝试使用与 jQuery 1.9+ 兼容的更新版本的 jQuery UI。

见Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools。

编辑：为澄清起见，您的脚本包含应该是

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/themes/black-tie/jquery-ui.‌css"></link>

考虑使用 jQuery 1.9.1，但它似乎与 1.9.0 一起工作正常。

【讨论】：

我现在如何修复上面的代码。我迷路了。请帮忙。
好吧，从包含 jQuery UI 1.9.1 或更高版本开始。那是 $.browser 被删除的时候。它应该可以正常工作，就像在这个 JSFiddle 中一样。 jsfiddle.net/5peJH/6
查看编辑以获得更详细的说明。
老兄，你的规则。非常感谢。
不客气。依赖关系可能会很痛苦。也向其他贡献者指出加载顺序错误的道具。

【解决方案2】：

你没有包含 jQuery。在任何其他 js 或 jquery 文件之前包含它，你应该很好。

【讨论】：

我已经更新了上面的代码，请看一下。谢谢

【解决方案3】：

按以下顺序包含 jQuery：jQuery - jQueryUI - jQueryUIcss。

使用 <link> 包含 css 文件。

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">  </link>

为您的 JS 使用 $(document).ready(..) - 这样所有的执行都会在所有 DOM 元素都加载后发生。

<script>

$(document).ready(function(){
    var Event = function(text, desc) {
        this.text = text;
        this.desc = desc;
    };

    var events = {};
    events[new Date("07/06/2014")] = new Event("hello world test 1");
    events[new Date("08/8/2014")] = new Event("hello world test 2");
    events[new Date("09/26/2014")] = new Event("hello world test 3");

    $("#dates").datepicker({
        beforeShowDay: function(date) {
            var event = events[date];
            if (event) {
                return [true, 'event', event.text];
            }
            else {
                return [true, '', ''];
            }
        },
        onSelect: function(dateText) {
            var event = events[new Date(dateText)];
            if (event) {
                alert(event.text + "\n" + event.desc);
            }
        }
    });

});
</script>

【讨论】：

我尝试了上面的代码，我仍然得到一个空白页。???
控制台有什么错误吗？
没有错误。请在您的系统上也检查一下。非常感谢您的帮助。

【解决方案4】：

只需在 jQuery UI 之前添加 jQuery，使用 <link> 而不是 <script> 作为 css 并使用 document.ready 中的 jQuery 函数：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"></link>
<link rel="stylesheet" href="/resources/demos/style.css"></link>
<style type="text/css">
.event > a { 
    background-color: gray !important;
    background-image:none !important;
}
</style>
<script>
// hookup jquery ready function
$(document).ready(function () {
    var Event = function(text, desc) {
        this.text = text;
        this.desc = desc;
    };

    var events = {};
    events[new Date("07/06/2014")] = new Event("hello world test 1");
    events[new Date("08/8/2014")] = new Event("hello world test 2");
    events[new Date("09/26/2014")] = new Event("hello world test 3");

    $("#dates").datepicker({
        beforeShowDay: function(date) {
            var event = events[date];
            if (event) {
                return [true, 'event', event.text];
            }
            else {
                return [true, '', ''];
            }
        },
        onSelect: function(dateText) {
            var event = events[new Date(dateText)];
            if (event) {
                alert(event.text + "\n" + event.desc);
            }
        }
    });
});
</script>
</head>

<body>
    <div id="dates"></div>
</body>
</html>

【讨论】：

我补充说还是不行。
我已经更新了上面的代码，请看一下。谢谢
现在您有 jquery.ui 的重复条目。您的服务器是否已连接到 Internet，是否可以访问 Microsoft CDN？
对不起。即使在删除之后。检查上面的代码它仍然不起作用。你能复制粘贴代码并执行并让我知道我哪里出错了吗？感谢你的帮助和时间。谢谢
是的，脚本在服务器上并连接到互联网