如何在bootstrap 3日期/时间选择器窗口小部件中添加时间选择器，并添加字符串格式

Question

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

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

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

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

$('#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');

这来自我之前的问题：

Add custom text to the output text field in bootstrap datetimepicker

这样可以正常工作，因为文本字段显示：

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

如果无法做到这一点，是否有办法让时间窗口小部件默认出现，这就足够了。

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

defaultDate:'now'

代码以防强制日期选择器出现，但这没有帮助。

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我发现这是一个已知的issue，并且有一个开放的pull request试图解决它。如果需要，可以尝试使用pull请求提出的代码在本地更改libary代码。