Question

在Firefox中点击输入字段时，datepicker不会显示。 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; }

希望这有助于其他可怜的灵魂。

在Bootstrap前置/附加输入上使用时的jQuery datepicker问题

2 个答案: