jQuery 在 Bootstrap prepended/appended 输入上使用时的日期选择器问题

Question

在 Firefox 中单击输入字段时，日期选择器不显示。 Chrome 或 IE 中没有问题。

这是我的 HTML:

<div class="input-append">
    <input id="start_date" name="start_date" class="date_field" type="text">
    <span class="add-on"><i class="icon-calendar"></i></span>
</div>

这是我的 JavaScript:

$('.date_field').datepicker({
    dateFormat: 'dd.mm.yy',
    minDate: 0
});

库和版本：

jQuery 1.7.1
jQuery UI 1.9.2
Bootstrap 2.2.2

Answer 1

您的 html 中的顺序是否正确？

我在下面得到了预览

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

并且您需要查看 API 文档。因为看起来 minDate 变量有语法错误。它必须看起来像这样：

$( ".selector" ).datepicker({
  minDate: new Date(2007, 1 - 1, 1)
});

Answer 2

我找到了修复方法。我想这一直是一个 CSS 问题。将输入框的 position 属性由 relative 改为 static.

.input-append input { position: static; }

希望这对其他可怜的人有帮助。

jQuery 在 Bootstrap prepended/appended 输入上使用时的日期选择器问题

jQuery datepicker issue when used on a Bootstrap prepended/appended input

firefox

jquery

jquery-ui-datepicker

twitter-bootstrap-2