逐步增强 html 表单，jQuery UI 日期选择器不起作用

发布于 2025-01-05 20:20:51 字数 1752 浏览 5 评论 0原文

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

我发现有 Modernizr.load() 可以用来代替 yepnope()，但这不起作用，最终得到 Object #< ;对象>没有方法“load”错误，所以我回到了yepnope()。以下是网页的部分。

<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>

有一个带有的表单

经过一番谷歌搜索后，我发现了这个原因错误是加载了两次 jQuery Core，我也跟着这个，但无法解决问题。

谢谢。

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

原文

I'm new to progressively enhancing HTML5 forms, and I'm currently trying jQuery UI and HTML5's new input types to create cross-browser forms. I'm using Modernizr and Yepnope for conditional loading of scripts and following tutorial given at CSS-tricks.com. But I'm getting Object [object Object] has no method 'datepicker' error.

I found that there's Modernizr.load() which can be used in place of yepnope(), but that didn't worked and ended up with Object #<Object> has no method 'load' error so I went back to yepnope(). Below is by <Head> section of the webpage.

<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>

And the <body> has a form with <input type='date' name='dtTest'/>

After a bit Googling, I found that cause for the error is loading of jQuery Core twice, I also followed this, but can't fix the issue.

Thanks.

Note: I'm testing the page in Chrome 17 and Opera 11.61.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不语却知心 2025-01-12 20:20:52

您的 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 /code> 本身。

Here's what your HTML page should look like:

<!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>

And the content of datepicker.js should be:

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

This works fine on my copy of Chrome, though I've not had the chance to check it in other browsers.

Update: We can avoid using separate datepicker.js by making use of callback block of yepnope more efficiently and binding datepicker() there itself.

回复收藏 0 原文

~没有更多了~