Question

我的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：

$（ '日期选择器。'）日期选择器（）;

当我点击图标时，datepicker没有显示。它显示我点击输入字段。

单击图标时如何使日期选择器可见。

Answer 1

这里最好的方法是添加一个类，让我们对包含的div说“date”，并在该div上添加datepicker功能，如：

<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();

Answer 2

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

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

Answer 3

尝试下面这个有效的代码示例，告诉我这是否有效

<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>

Bootstrap datepicker图标

3 个答案: