Постепенно улучшается HTML-форма, JQuery UI datepicker не работает - PullRequest
Новая
       40

Постепенно улучшается HTML-форма, JQuery UI datepicker не работает

0 голосов
/ 14 февраля 2012

Я новичок в постепенном улучшении форм 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 дважды, я также следовал за этим , но не могу решить проблему.

Спасибо.

Примечание : I 'm тестирование страницы в Chrome 17 и Opera 11.61.

1 Ответ

1 голос
/ 14 февраля 2012

Вот как должна выглядеть ваша 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, используя более эффективный блок callback yepnope и привязываяdatepicker() там сам.

...