引导日期选择器图标答案

【问题标题】：Bootstrap datepicker icon引导日期选择器图标
【发布时间】：2014-10-27 16:37:01
【问题描述】：

我的html代码是：

 <div class="input-group">
  <input type="text" data-date-format="dd-mm-yyyy" data-date-viewmode="years" class="form-control date-picker">
  <span class="input-group-addon"> <i class="icon-calendar"></i> </span>
 </div>

JS：

$('.date-picker').datepicker();

当我点击图标时，日期选择器没有显示。它在我点击输入字段时显示。

当我点击图标时如何使日期选择器可见。

【问题讨论】：

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

最好的方法是添加一个类，让我们说“日期”到包含的 div，然后在该 div 上添加日期选择器功能，例如：

<div class="input-group date">
  <input type="text" data-date-format="dd-mm-yyyy" data-date-viewmode="years" class="form-control date-picker">
  <span class="input-group-addon"> <i class="icon-calendar"></i> </span>
</div>

JS：

$('.date').datepicker();

【讨论】：

【解决方案2】：

试试下面这个工作代码示例并告诉我这是否有效

<div class="input-append date" id="datepicker" data-date="dateValue: Customer.DateOfBirth" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" data-bind="value: Customer.DateOfBirth" readonly="readonly">
<span class="add-on"><i class="icon-calendar"></i></span>

【讨论】：

【解决方案3】：

您的输入字段具有 date-picker 类，而您的图标没有。

添加该类可能会为您提供所需的行为，但如果您具有特定于该类的样式，它也可能会影响您的图标。

【讨论】：