如何仅在单击图标时显示日历？

Question

我在我的应用程序中使用 bootstrap-datepicker-1.9.0。最近客户要求仅当用户单击日历图标时才显示日历。当前代码适用于整个输入组。这是我的代码示例L

$(document).ready(function() {
        setDatepicker("input-group.date");
});

function setDatepicker(className) {
        $("." + className).datepicker({
        format: "mm/dd/yyyy",
        orientation: "bottom auto",
        autoclose: true
    });
};

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<div class="form-group m-1">
  <label class="font-weight-bold" for="begin_dt">Begin Date:</label>
  <div class="input-group date">
    <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
    <input class="form-control" type="text" name="begin_dt" id="begin_dt" value="">
  </div>
</div>

我只想在用户单击日历图标时显示日期选择器。我仍然没有找到实现它的方法。如果有人知道实现这个的方法请告诉我。

Answer 1

您可以简单地使用 onclick 函数来获取单击图标的父级并在那里显示 datePicker。

我们需要使用 .parent() 和 attr 来获得实际的 classname。因为 class 名称中有一个 space。您可以将其替换为 .

我还添加了结束日期以反映该功能在两个日期都有效。

编辑：为确保点击图标后日期选择器不显示在输入焦点上：我们可以使用 showOnFocus: "false"

运行下面的代码段仅适用于图标点击。

function setDatepicker(_this) {
  //Get the parent class name so we can show date picker
  let className = $(_this).parent().parent().parent().attr('class')
  //Remove space and add `.`
  let removeSpace = className.replace(' ', '.')
  $("." + removeSpace).datepicker({
    format: "mm/dd/yyyy",
    orientation: "bottom auto",
    autoclose: true,
    showOnFocus: "false"
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<div class="form-group m-1">
  <label class="font-weight-bold" for="begin_dt">Begin Date:</label>
  <div class="input-group date">
    <span class="input-group-prepend"><span class="input-group-text">
        <i class="fa fa-calendar" onclick="setDatepicker(this)"></i>
      </span>
    </span>
    <input class="form-control" type="text" name="begin_dt" id="begin_dt" value="">
  </div>
</div>

<div class="form-group m-1">
  <label class="font-weight-bold" for="begin_dt">End Date:</label>
  <div class="input-group date">
    <span class="input-group-prepend"><span class="input-group-text">
        <i class="fa fa-calendar" onclick="setDatepicker(this)"></i>
      </span>
    </span>
    <input class="form-control" type="text" name="end_dt" id="end_dt" value="">
  </div>
</div>

如何仅在单击图标时显示日历？

How to show calendar only on icon click?

jquery

bootstrap-4

bootstrap-datepicker