正在逐步增强html表单，jQuery UI日期选择器无法工作

我是逐步增强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'/> 的形式

在谷歌上搜索了一下后，我发现错误的原因是两次加载jQuery Core，我也遵循了这一点，但无法解决问题。

谢谢。

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

以下是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上运行得很好，尽管我还没有机会在其他浏览器中检查它。

更新：我们可以通过更有效地利用yepnope的callback块并将datepicker()自身绑定来避免使用单独的datepicker.js。

相关内容

最新更新

热门标签：