将自定义文本添加到引导程序 datetimepicker 中的输出文本字段答案

【问题标题】：Add custom text to the output text field in bootstrap datetimepicker将自定义文本添加到引导程序 datetimepicker 中的输出文本字段
【发布时间】：2017-08-23 03:45:14
【问题描述】：

我在这里使用 bootstrap 3 日期/时间选择器：

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

是否可以自定义日期/时间文本字段中的输出文本？我希望在开头添加一个字符串，例如'Departure:'。

我目前的设置很简单，javascript很简单：

$('#datetimepicker').datetimepicker({defaultDate:'now',ignoreReadonly: true });
$('#datetimepicker').data("DateTimePicker").format('DD/MM/YYYY HH:mm:ss');

HTML 是：

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

这将根据代码中给出的格式显示日期和时间。如何将字符串 Departing: 添加到文本字段的开头？

【问题讨论】：

尝试在您的第二条语句中添加格式：'Departure DD/MM/YYYY HH:mm:ss'。检查这个小提琴：jsfiddle.net/4GP9c/3
你的小提琴正是我所追求的，我现在正试图弄清楚为什么它在你的小提琴中有效，但在我的代码中，它用值解析 Hello 的字母，这就是我问这个的原因关于SO的问题，因为我已经尝试过了。有趣！
好的，你的工作是因为它使用了不同的日期时间选择器，请查看我正在使用的问题中的链接。还是谢谢！

标签： javascript twitter-bootstrap datepicker eonasdan-datetimepicker

【解决方案1】：

您必须在 format 选项中使用方括号，因为该组件使用矩标记。

Moment 文档有一个 转义字符 section，其中指出：

要对格式字符串中的字符进行转义，可以将字符括在方括号中。
moment().format('[today] dddd'); // 'today Sunday'

这是一个工作示例：

$('#datetimepicker').datetimepicker({
  defaultDate:'now',
  ignoreReadonly: true,
  format: '[Departing:] DD/MM/YYYY HH:mm:ss'
});

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

【讨论】：

太好了，也感谢您解释背后的原因，我知道库使用了 moment，但我不知道 moment 有转义序列。
不客气，很高兴为您提供帮助。我知道从 datetimepicker 文档中转义字符部分并不容易。

【解决方案2】：

$('input').val('Departing: ' + pickedDate.toString());

【讨论】：

我已经想到了这一点，但是每当日期发生变化时都需要触发它，因为有事件处理程序可以做到这一点，但我试图避免这种解决方案希望有一个更整洁的。