Измените позиционирование даты в Jquery UI

0

Поэтому я хотел, чтобы мой выбор даты был на вершине ввода, и я получил этот код, который работает над jsfiddle, но когда я запускаю его самостоятельно, ничего не происходит. Можете ли вы сказать мне, если что-то не так?

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $("#datepicker").datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function () {
            inst.dpDiv.css({
                top: -200,
                left: 100
            });
        }, 0);
    }
});
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
Теги:
datepicker

2 ответа

2

jsFiddle загружает jQuery при загрузке окна по умолчанию. Вам нужно либо обернуть свой код в готовый к документу вызов:

$(document).ready(function () {
    $("#datepicker").datepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: -200,
                    left: 100
                });
            }, 0);
        }
    });
})

или запустить его после того, как элементы существуют на странице, переместив ваш код в конец страницы перед закрывающим тегом тела.

0

Я немного опоздал, чтобы ответить на этот вопрос, но, возможно, я надеюсь, что это поможет кому-то другому.

 $('.txtDate').datepicker({
       beforeShow: function (textbox, instance) {
           var txtBoxOffset = $(this).offset();
           var top = txtBoxOffset.top;
           var left = txtBoxOffset.left;
           //console.log('top: ' + top + 'left: ' + left);
                   setTimeout(function () {
                       instance.dpDiv.css({
                           top: top-190,
                           left: left
                   });
               }, 0);

       }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню