2011-04-16 2 views
8

Добрый день!JQuery datepicker не работает

Я пытаюсь использовать jquery в первый раз. И я не могу заставить его работать. Мой код выглядит следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 
<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
    </script> 
    <div class="demo"> 
    <p>Date: <input type="text" id="datepicker"></p> 
    </div><!-- End demo --> 
</body> 
</HTML> 

Но DatePicker не работает .. Что я должен сделать, чтобы заставить его работать? Спасибо.

+5

«Не работает» не является достаточным описанием ошибки. * Что * не работает? Что происходит? –

+1

«не может заставить его работать» - страшное описание проблемы. Что не работает? Что вы ожидаете от этого? Какие ошибки возникают на консоли javascript? – Oded

+1

датапикер. – newbie

ответ

22

Вы не включили библиотеку Datepicker

так добавить

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 

к вашему <head> теге

live demo

+0

Как я могу включить его? Спасибо – newbie

+0

ах хорошо .. сейчас он работает .. THBN. :) – newbie

+0

@newbie - убедитесь, что рядом с ответом вы указали и нажмете галочку контура. Это будет справедливо под подсчетом голосов для ответа. –

0

попробуйте настроить порядок выполнения вашего скрипта. Поместите тег сценария под элементом, который он пытается затронуть. Или оставьте это вверху и оберните его в $(document).ready() EDIT: и включите нужный файл.

6

Datepicker не является частью jQuery. Вы должны получить jQuery UI, чтобы использовать datepicker.

5

Проблема заключается в том что вы не ссылки на библиотеку JQuery UI (где находится датапикер):

http://jsfiddle.net/5AkyC/

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> 
<script> 
$(function() { 
    $("#datepicker").datepicker(); 
}); 
</script> 
</head> 
<body> 
    <div class="demo"> 
    <p>Date: <input type="text" id="datepicker"></p> 
    </div><!-- End demo --> 
</body> 
</HTML> 
+0

Вы забыли отключить нормализацию CSS в своей демонстрации! – Raynos

+0

@ Raynos - Это не важно для демонстрации, ИМО. –

+0

@ Raynos - Хотя я действительно удивляюсь, почему люди jsfiddle делают это по умолчанию. : \ –

2

Для меня .. проблема в том, что якорь нужен титул, и не хватало!

0

после этого все HTML мы хотим, чтобы написать эти строки кода

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all"> 



<script> 
$('#date').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 
    yearRange: "-100:+0", 
    dateFormat: 'dd/mm/yy' 

}); 
</script> 
1

я застрял на вопрос, где DatePicker(), казалось, не делать ничего. Оказалось, что проблема заключалась в том, что входные данные находились внутри div «вход-группа» Bootstrap. Простое извлечение ввода из группы ввода разрешило проблему.

Смежные вопросы