2013-12-01 4 views
0

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

<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> 

ответ

1

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

$(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); 

     }