逐步增强 html 表单，jQuery UI datepicker 不起作用答案

【问题标题】：Progressively enhancing html form, jQuery UI datepicker not working逐步增强 html 表单，jQuery UI datepicker 不起作用
【发布时间】：2012-02-14 13:57:59
【问题描述】：

我是逐步增强 HTML5 表单的新手，我目前正在尝试使用 jQuery UI 和 HTML5 的新输入类型来创建跨浏览器表单。我正在使用Modernizr 和Yepnope 进行脚本的条件加载，并遵循CSS-tricks.com 提供的教程。但我收到Object [object Object] has no method 'datepicker' 错误。

我发现有Modernizr.load() 可以用来代替yepnope()，但这不起作用并以Object #<Object> has no method 'load' 错误告终，所以我回到yepnope()。以下是网页的<Head>部分。

<Head>
    <title>HTML5 Web Form</title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/modernizr-2.5.2.js"></script>
    <script type="text/javascript" src="js/yepnope.1.5.2-min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <script type="text/javascript">
    yepnope({
            test: Modernizr.inputtypes.date,
            nope: [
                    "./js/jquery-ui-1.8.17.custom.min.js",
                    "./css/jquery-ui-1.8.17.css"
            ]
    });

    $(function(){
        $("input[type='date']").datepicker(); //this is giving error
    });
    </script>
</Head>

而<body> 有一个带有<input type='date' name='dtTest'/> 的表单

google了一下，发现错误原因是两次加载jQuery Core，我也关注了this，但无法解决问题。

谢谢。

注意：我正在 Chrome 17 和 Opera 11.61 中测试页面。

【问题讨论】：

在这个阶段我唯一能做的猜测是 datepicker 函数在你的 jQuery/jQuery UI 有机会加载之前被调用...你试过调用 .datePicker() 函数吗在页面加载时而不是立即（如上）？
@MassivePenguin 它已经在 DOM 就绪函数中了。
从查看您链接的页面来看，您的 js 文件似乎没有按需要的顺序加载。我认为您已经检查了浏览器的控制台以确保所有脚本实际上都被正确找到并加载？恐怕没有看到一些实时代码，我无法提供更多建议。

标签： jquery jquery-ui modernizr progressive-enhancement yepnope

【解决方案1】：

您的 HTML 页面应如下所示：

<!DOCTYPE html>
<Html>
    <meta charset="utf-8">
    <head>
        <title>HTML5 Web Form</title>
        <script type="text/javascript" src="js/modernizr-2.5.2.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/yepnope.1.5.2-min.js"></script>
        <script type="text/javascript">

            yepnope({
                test : Modernizr.inputtypes && Modernizr.inputtypes.date,
                nope : [
                    'js/jquery-ui-1.8.17.min.js',
                    'css/jquery-ui-1.8.17.css',
                    'js/datepicker.js'
                ],
                callback : {
                    'jquery-ui-1.8.17.min.js' : function() {
                         $("input[type='date']").datepicker();
                    }
                }
            });
        </script>
    </head>
    <body>
        <div id="lblTest">Hello World</div><br/>
        <form name="frmMain" action="#">
            Date : <input type='date' name='dtTest'/>
        </form>
    </body>
</Html>

datepicker.js 的内容应该是：

$(function() {
    $("input[type='date']").datepicker();
});

这在我的 Chrome 副本上运行良好，尽管我没有机会在其他浏览器中检查它。

更新：我们可以避免使用单独的datepicker.js，方法是更有效地使用 yepnope 的 callback 块并在那里绑定 datepicker()。

【讨论】：

我已经尝试过使用回调，但这根本不起作用，在 Inspector 中也没有给出任何错误。
您可以发布代码链接吗？我看不出您发布的内容有任何问题，因此我需要在上下文中查看它。
Here 是我的测试页面和所有脚本的链接
我已经用我设法开始工作的代码替换了我的原始答案。希望它也对你有用！