1

我正在使用tempusdominus并试图让一个属性allowInputToggle工作：https ://tempusdominus.github.io/bootstrap-4/Options/#allowinputtoggle

这样做的目的是当用户点击进入一个<input>日历时应该打开。与必须单击日历图标的默认设置相反。

我正在使用 Bootstrap 4（和 FontAwesome Pro - 最新版本，用于我的图标）并具有以下标记：

<form class="form-inline">
    <label for="date_start" class="mr-2">From</label>
    <div class="input-group date mr-5" id="dateStart" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#dateStart" autocomplete="off">
        <div class="input-group-append" data-target="#dateStart" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>

    <label for="date_end" class="mr-2">To</label>
    <div class="input-group date mr-5" id="dateEnd" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#dateEnd" autocomplete="off">
        <div class="input-group-append" data-target="#dateEnd" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>

    <button class="btn btn-lg btn-primary">View notifications <i class="fas fa-chevron-right"></i></button>
</form>

我已经初始化 tempusdominus 如下：

<script>
$(function () {
    $('#dateStart').datetimepicker({
        format: 'L',
        allowInputToggle: true,
        format: 'YYYY-MM-DD'
    });

    $('#dateEnd').datetimepicker({
        format: 'L',
        allowInputToggle: true,
        format: 'YYYY-MM-DD'
    });
});
</script>

当我单击日历图标时，我得到日历：

在此处输入图像描述

但是当我单击输入（例如#dateStart）时，我不会：

在此处输入图像描述

设置allowInputToggle为trueon initialisation 的目的是使这项工作。那为什么不做呢？

没有控制台错误。

在浏览器中尝试过： Firefox 68.0.1 和 Chrome 76.0.3809.100。相同的行为。

使用： jquery 3.2.1、moment.js 2.24.0、Bootstrap 4.0.0、Tempus Dominus Bootstrap4 v5.0.0-alpha14

4

1 回答 1

1

回复有点晚，但我们最近遇到了同样的问题，发现没有必要使用该allowInputToggle选项。

只需添加data-toggle="datetimepicker"到输入元素以及包含图标的 div。

就像这里

于 2020-09-01T19:59:36.850 回答