我使用Jquery插件Bootstrap Datepicker。它在Firefox中运行良好。此外,它适用于我的网站的一些页面在谷歌浏览器(版本33.0.1750.117米)。但是,有一个文本输入(name =“TravelDate”),此插件不起作用。此文本输入位于Bootstrap模态窗口。
<script>
$(function () {
$("#date-trip").datepicker({
format: "dd.mm.yyyy",
startDate: new Date(),
todayBtn: "linked",
language: "ru",
autoclose: true
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="createTripModal" tabindex="-1" role="dialog" aria-labelledby="createTripModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Travel creating</h4>
</div>
@using (Html.BeginForm("Create", "Trip", new {ReturnUrl = ViewBag.ReturnUrl}, FormMethod.Post, new {@class = "form-horizontal", role = "form"}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="modal-body">
<label for="date-trip">Date:</label>
<input name="TravelDate" type="text" id="date-trip" class="form-control" required autofocus />
</div>
<div class="modal-footer">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Google Chrome中的控制台没有错误。这个插件在其他表单上正常工作非常重要。
我很乐意接受任何建议。
答案 0 :(得分:11)
我修复了一个错误。 This post帮助了我。我在插件代码(+10 - &gt; +1151)中更改了这一行:
var zIndex = parseInt(this.element.parents().filter(function() {
return $(this).css('z-index') != 'auto';
}).first().css('z-index'))+1151;
答案 1 :(得分:5)
注意使用<input type="date"....>
- 最近版本的Chrome有自己的日期选择器用于html5输入类型字段&#34; date&#34; ,干扰Bootstrap 3日期选择器。请改用<input type="text"....>
。
答案 2 :(得分:3)
请在代码中使用此CSS在Chrome中显示datepicker:
<style>.datepicker{z-index:1200 !important;}</style>