时间戳

首页 > 解决方案 > jQuery UI：智能手机上的日期选择器问题

asp.net-mvc - jQuery UI：智能手机上的日期选择器问题

问题描述

ASP.NET Core MVC我在、 使用bootstrap和创建了一个网站jquery-ui。该网站在桌面上运行良好。

但是在智能手机中，当我想用​​ 选择日期时jquery-ui datepicker，日历窗口出现在错误的位置……，在包含日期输入的部分窗口之外。

我的观点是：

@using (Html.BeginForm(FormMethod.Post, new { @class = "form-group" }))
{
    <table id="ProdTable" class="table">
        <tbody id="ProdTable">
            @foreach (var p in Model)
            {
                <tr id="tableRow" data-key="@p.lineid">
                    <td><input asp-for="@p.paData" type="date"
                               class="appDatePickClass" autocomplete="off" /></td>
            </tr>
        </tbody>
    </table>
}
    <script type="text/javascript">
        // setting the Date Picker that I want.
        $(document).ready(function () {
            $(".appDatePickClass").attr('type', 'text');

            $(".appDatePickClass").datepicker({
                dateFormat: "yy-mm-dd"
            });
        });
</script>

谢谢你。

标签： asp.net-mvctwitter-bootstrapjquery-uijquery-ui-datepicker

解决方案

尝试这项工作以调整日期选择器打开后的位置（请根据您的要求调整位置）

<script type="text/javascript" language="javascript">
  $(function(){ 
        $("#appDatePickClass").datepicker({ dateFormat:'yy-mm-dd'}); 
        // bind click event and adjust datepicker position.
        $(".hasDatepicker").click(function(e){
            $("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
        });
  });
</script>

并确保你有：

在顶部。

推荐阅读