如果单击图标，如何显示日期选择器？答案

【问题标题】：How Can I show the Date Picker if I Click the Icon?如果单击图标，如何显示日期选择器？
【发布时间】：2016-05-05 09:12:05
【问题描述】：

当我单击图标时，日期选择器不显示。这是我的代码。提前致谢。

<div class="col-md-4">
  <div class="form-group">
    <label class="control-label" for="dateOfBirth"><span class="text-danger">*</span> Date of Birth</label>
    <div class="input-group">
      <input id="dateOfBirth" name="dateOfBirth"
             rv-value="applicant:personalInformation:dateOfBirth | date"
             type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-1">
      <span class="input-group-addon">
        <i class="entypo-calendar"></i>
      </span>
    </div>
  </div>
</div>

【问题讨论】：

标签： html date datepicker icons

【解决方案1】：

将脚本添加到您的代码中并包含 jquery 插件。像这样

    $(function () { 
  $('#dateOfBirth').datetimepicker({
format: 'L'
});});

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-4">
  <div class="form-group">
    <label class="control-label" for="dateOfBirth"><span class="text-danger">*</span> Date of Birth</label>
    <div class="input-group">
      <input id="dateOfBirth" name="dateOfBirth"
             rv-value="applicant:personalInformation:dateOfBirth | date"
             type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-1">
      <span class="input-group-addon">
        <i class="entypo-calendar"></i>
      </span>
    </div>
  </div>
</div>

【讨论】：

更多日期选择器示例检查此link

【解决方案2】：

这工作正常。检查这个

    $(function () { 
  $('#dateOfBirth').datetimepicker({
format: 'L'
});});

 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-4">
  <div class="form-group">
    <label class="control-label" for="dateOfBirth"><span class="text-danger">*</span> Date of Birth</label>
    <div class="input-group">
      <input id="dateOfBirth" name="dateOfBirth"
             rv-value="applicant:personalInformation:dateOfBirth | date"
             type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-1">
      <span class="input-group-addon">
        <i class="entypo-calendar"></i>
      </span>
    </div>
  </div>
</div>

【讨论】：

这里给出的日期格式“L”表示月份数字、月份中的日期、年份。
对于图标点击你必须在 div