JQuery UI DatePicker должность
У меня есть проблема в Jquery UI DatePicker позиции относительно скрытого типа ввода.
Я запустил DatePicker при нажатии значка FontAwesome и сохранил выбранную дату в скрытом виде ввода. Все рабочие, но в календаре DatePicker не ниже иконки.
Решение
Вы можете попробовать это:
<i class="fa fa-calendar" aria-hidden="true"></i>
<div id="datepicker"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
})
.hide()
.click(function() {
$(this).hide();
});
$(".fa-calendar").click(function() {
$("#datepicker").show();
});
});
//или же
$( function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"});
} );
<p>Date: <input type="text" id="datepicker"></p>
Другие решения
Jquery
$(document).ready(function(){
$('#trigger').click(function() {
$('#dp').show().focus().hide();
});
$('#dp').datepicker({
altField: '',
dateFormat: "dd-mm-yy",
beforeShow: function (input, inst) {
var rect = input.getBoundingClientRect();
console.log(rect);
console.log(input);
setTimeout(function () {
inst.dpDiv.css({ top: rect.top + 22, left: rect.left + -130 });
}, 0);
},onSelect: function (date) {
$('#eventSearchForm').submit();
}
});
});
Html
<form id="eventSearchForm" method="get" action="/index.php">
<div class="row">
<div class="form-group col-lg-12 col-xs-12 col-sm-12">
<div class="input-group date">
<input type="search" name="keywords" class="form-control pull-left searchField" />
<div class="input-group-btn">
<input type="text" id="dp" style="display: none" name="date" class="">
<button class="btn btn-default trigger iconbtn" id="trigger" type="button"><i class="fa fa-calendar" aria-hidden="true"></i></button>
</div>
</div>
</div>
<input type="submit" name="search" />
</div>
detector