2015-01-27 3 views
-1

я использую этот очень простой код Datepicker из документации JQuery UI, но он не работает на моем Mac:JQuery Datepicker не реагирует

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 

<body> 
    <input type="text" id="date-picker" /> 
    <script> 
     $("#date-picker").datepicker(); 
    </script> 
</body> 

Может кто-нибудь сказать мне, почему это не работает? Заранее спасибо!

+0

Вы должны, прежде чем включить JQuery, и у вас есть две ссылки на JQuery JS, проверьте: HTTP: // jsfiddle.net/bwjb02rf/ –

ответ

2

jQuery UI зависит от jQuery.

Поэтому вам необходимо включить скрипт JQuery перед сценарием JQuery UI:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 

Нет необходимости включать JQuery дважды либо. Вышесказанное будет достаточным.

Вот working example.

+0

Но не первая строка, связанная с пользовательским интерфейсом jQuery? – Drexel

+0

Первая строка - таблица стилей. В этом случае его порядок не влияет на скрипты (файлы .js') под ним. –

+1

Первая строка - css jQuery UI. Вы можете загрузить ее в любом месте. –

1

Вы должны добавить jquery перед добавлением jqueryui.
Вы добавили Jquery twice.Remove один

<!doctype html> 
    <html> 
    <head> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    </head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
    <!-- <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>--> 


    <body> 
    <input type="text" id="date-picker" /> 
    <script> 
     $("#date-picker").datepicker(); 
    </script> 
    </body> 
+0

Большое спасибо за ответ! – Drexel

1

Yeahh включают JQuery до того Jquery UI

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
</head> 

<body> 
    <input type="text" id="date-picker" /> 
    <script> 
     $("#date-picker").datepicker(); 
    </script> 
</body> 
Смежные вопросы