Я очень новичок в jQuery и делаю первые пробные шаги по его использованию. Я пробовал свои силы, используя jQuery UI Datepicker . Кажется, в большинстве случаев работает нормально. Тем не менее, я обнаружил, что позиционирование Datepicker кажется неправильным, т. Е. Оно появляется в правой части экрана, а не сразу под вводом текста, когда CSS родительского тела указывает:
body {
margin-left: auto;
margin-right: auto;
position : relative;
width : 777px;
}
Однако удалите атрибут ширины из CSS тела, и все работает нормально - средство выбора даты появляется чуть ниже поля ввода текста.
body {
margin-left: auto;
margin-right: auto;
position : relative;
}
Таким образом, создается впечатление, что добавление атрибута ширины приводит к тому, что указатель даты располагается справа от текстовой области. Я посмотрел на CSS в Firebug и обнаружил, что средство выбора даты подобрало некоторые встроенные стили:
element.style {
left: 499.5px;
position: absolute;
top: 33px;
z-index: 1;
}
Я полагаю, что это создано где-то в недрах jQuery UI datepicker js.
Кто-нибудь сталкивался с этим раньше? Если так, то могу ли я что-то сделать (кроме указания ширины тела), чтобы обеспечить правильное расположение указателя даты?
Полный html ниже:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Datepicker</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css" type="text/css"/>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
position: relative;
width: 777px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#dateEntry" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<p>Date: <input id="dateEntry" type="text"/></p>
</body>
</html>