jQuery ui 日期选择器位置

Posted 2023-05-08

【中文标题】jQuery ui 日期选择器位置

【英文标题】：Jquery ui datepicker position

【发布时间】：2018-10-16 19:50:04

【问题描述】：

我的 Jquery ui datepicker 位置相对于隐藏的输入类型有问题。

我在点击 FontAwesome 图标时触发了日期选择器，并将所选日期保存在隐藏的输入类型中。所有工作但日期选择器日历位置不在图标下方。

【问题讨论】：

请发布您的 html 和 javascript。

【参考方案1】：

你可以试试这个：

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

【参考方案2】：

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>