JQuery DatePicker - ставить DatePicker под текстовым полем

У меня есть поле даты экзамена, как показано ниже изображения:

JQuery DatePicker - ставить DatePicker под текстовым полем

Мой код:

<html> 
<head> 
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css"> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"> </script> 
<script type="text/javascript"> 
$(function(){ 
    $("#datepicker1").datepicker({dateFormat: 'dd-mm-yy'}); 
}); 
</script> 
<style> 
.ui-datepicker{ 
    font-size: 9.5pt; 
} 

.ui-widget-header{ 
    font-size: 12px; 
    color: #102132; 
    background: #D7E5F2; 
} 

#ui-datepicker-div .ui-state-highlight{ 
    background: yellow; 
    color: red; 
    font-weight: bold; 
} 

.ui-datepicker-current-day .ui-state-active{ 
    background: white; 
    color: blue; 
    font-weight: bold; 
} 
</style> 
</head> 

<body> 
<input type="text" name="examdate" id="datepicker1" /> 
</body> 
</html>

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

источник

2015-12-15 KKL Michael

у вас есть достаточно места внизу для datepicker, чтобы открыть его? – Afsar

Кажется хорошо работать [здесь] (http://jsfiddle.net/vb2f4gu2/). –

@zan да, достаточно места –

$(function(){ 
 
    \t $("#datepicker1").datepicker({ 
 
\t dateFormat: 'mm/dd/yy', 
 
\t beforeShow: function (input, inst) { 
 
\t \t var rect = input.getBoundingClientRect(); 
 
\t \t setTimeout(function() { 
 
\t \t \t inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 }); 
 
\t \t }, 0); 
 
\t } 
 
}); 
 

 
});

<style> 
 
.ui-datepicker{ 
 
    font-size: 9.5pt; 
 
} 
 

 
.ui-widget-header{ 
 
    font-size: 12px; 
 
    color: #102132; 
 
    background: #D7E5F2; 
 
} 
 

 
#ui-datepicker-div .ui-state-highlight{ 
 
    background: yellow; 
 
    color: red; 
 
    font-weight: bold; 
 
} 
 

 
.ui-datepicker-current-day .ui-state-active{ 
 
    background: white; 
 
    color: blue; 
 
    font-weight: bold; 
 
} 
 
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script> 
 

 
<input type="text" name="examdate" id="datepicker1" />

источник

2015-12-15 06:56:03

Я получил решение от [link] (http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control) –

JQuery DatePicker автоматически отрегулирует UI Ca кредитора, Мы не должны управлять. , если у него есть правильное пространство над текстовым полем, тогда его показ по умолчанию.

Если у него нет надлежащего пространства, оно автоматически появится под текстовым полем. как пожелаете.

просто немного прокрутите вниз и щелкните по текстовому полю. Он покажет его, как вы хотите видеть.

источник

2015-12-15 07:10:11

JQuery DatePicker - ставить DatePicker под текстовым полем

ответ

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