如果单击图标,如何显示日期选择器?

时间:2016-05-05 09:12:05

标签: html date datepicker icons

单击图标时,日期选择器不显示。这是我的代码。在此先感谢。

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

2 个答案:

答案 0 :(得分:0)

将脚本添加到ur代码并包含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>

答案 1 :(得分:0)

这个工作正常。检查一下

&#13;
&#13;
    $(function () { 
  $('#dateOfBirth').datetimepicker({
format: 'L'
});});
&#13;
 <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>
&#13;
&#13;
&#13;