如何在 bootstrap 3 date/time 选择器小部件中仅添加时间选择器，并添加格式的字符串

Question

我的问题涉及以下bootstrap 3 日期时间选择器：

https://eonasdan.github.io/bootstrap-datetimepicker/

我在网站上有一个 bootstrap 3 日期和时间选择器小部件，但实际上我希望它只是一个时间选择器。

这通常很容易实现，可以使用如下格式参数完成：

$('#datetimepicker').datetimepicker({defaultDate:'now',ignoreReadonly: true});
$('#datetimepicker').data("DateTimePicker").format('LT');

注意本地时间的 LT，或者您可以使用：

$('#datetimepicker').data("DateTimePicker").format('HH:mm:ss');

这两个都有效，因为我们删除了对日期的任何引用。

但是，我的问题是我在文本字段中使用了一个额外的字符串，所以我的代码实际上是这样的：

$('#datetimepicker').datetimepicker({defaultDate:'now',ignoreReadonly: true});
$('#datetimepicker').data("DateTimePicker").format('[Departing at:] LT');

这来自我之前的问题：

这很好用，因为文本字段显示：

但它仍然包含一个日期小部件。如何删除日期小部件？

如果这不可能，有没有办法让时间小部件默认首先出现，这就足够了。

我应该指出我已经尝试删除

defaultDate:'now'

代码，以防它强制显示日期选择器，但这无济于事。

Answer 1

这是日期时间选择器的一个错误，如果您查看代码，您会发现它在内部使用 isEnabled 函数来确定要显示的组件。 isEnabled 确定是否应显示日期选择器以检查格式是否包含 D（不区分大小写）。不幸的是，它没有考虑字符串转义 [].

如果format选项不包含Y、M、d和D，该组件将按预期工作，如下所示以下示例：

$('#datetimepicker').datetimepicker({
  defaultDate:'now',
  ignoreReadonly: true,
  format: '[abc:] LT'
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group" style = "margin-bottom:4px;">
    <div class='input-group date' id='datetimepicker'>
        <input type='text' class="form-control" readonly='readonly'/>
        <span class="input-group-addon" style="padding: 6px 11.5px;">
        <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

我发现这是一个已知的 issue and there is a open pull request 试图修复它。如果需要，您可以尝试使用拉取请求建议的代码在本地更改库代码。

如何在 bootstrap 3 date/time 选择器小部件中仅添加时间选择器，并添加格式的字符串

How to have just the time picker in a bootstrap 3 date/time picker widget with an added string in format

javascript

jquery

twitter-bootstrap

eonasdan-datetimepicker