jQuery UI : 智能手机上的日期选择器问题
jQuery UI : Problem with datepicker on smartphones
我在 ASP.NET Core MVC
中使用 bootstrap
和 jquery-ui
创建了一个网站。该站点在桌面上运行良好。
但是在智能手机中,当我想选择 jquery-ui datepicker
的日期时,日历 window 出现在错误的位置......,在包含 window 的部分之外日期输入。
我的观点是:
@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>
谢谢。
试试这个解决方法,在打开后调整日期选择器的位置(请根据您的要求调整位置)
<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>
并确保您有:
在顶部。
我在 ASP.NET Core MVC
中使用 bootstrap
和 jquery-ui
创建了一个网站。该站点在桌面上运行良好。
但是在智能手机中,当我想选择 jquery-ui datepicker
的日期时,日历 window 出现在错误的位置......,在包含 window 的部分之外日期输入。
我的观点是:
@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>
谢谢。
试试这个解决方法,在打开后调整日期选择器的位置(请根据您的要求调整位置)
<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>
并确保您有:
在顶部。