DateUpicker пользовательского интерфейса jQuery не будет отображаться - полный код включен - PullRequest
9 голосов
/ 12 мая 2010

У меня возникают проблемы с отображением jQuery datepicker, как показано здесь: http://jqueryui.com/demos/datepicker/

Я полагаю, что я скачал все нужные файлы, но чтобы быть уверенным, я начал с нуля и скопировал демонстрационный сайт. Не все это, но то, что я считал важными частями. В результате не будет отображаться средство выбора даты и ошибки javascript. Вот мой полный пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" media="all" />
 <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

<script type="text/javascript" charset="utf-8">
 jQuery(function(){
  jQuery("#datepicker").datepicker();
 });
</script>
</head>
<body>
<input type="text" id="datepicker" class="hasDatepicker" />
</body>
</html>

Любая помощь будет принята с благодарностью. Спасибо!

Ответы [ 4 ]

26 голосов
/ 12 мая 2010

Удалите класс hasDatepicker из входного тега, и он должен работать нормально.

class = 'hasDatepicker' //Need to remove
3 голосов
/ 12 мая 2010

Если вы внимательно посмотрите на исходный код jQuery UI lib , вы увидите, что он использует класс hasDatepicker внутри для выбора даты. Итак, используйте любой другой класс (даже hasdatepicker работает), но не hasDatepicker:

<input type="text" id="datepicker" class="anyOtherClassName"/>

или

<input type="text" id="datepicker" class="hasdatepicker"/>
1 голос
/ 12 мая 2010

Удалить класс = "hasDatepicker"

0 голосов
/ 13 ноября 2017

У меня была похожая проблема. Мое решение было добавить z-index в .date-picker из datePicker.css

.date-picker {
position: absolute;
z-index:1000;/*********** MY Change *************/
font-size: 1em;
color: #CCC;
text-align: center;
cursor: default;

border: 1px solid #444;
border-radius: 2px;
margin: 6px 0;
background: #222;
box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2);} 

Вот и все !!! И вот начал выбирать сборщик даты. Надеюсь, что это поможет кому-то, кто пришел сюда для подобных проблем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...