将自定义文本添加到 bootstrap datetimepicker 中的输出文本字段

Question

我在这里使用 bootstrap 3 date/time 选择器：

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

是否可以自定义 date/time 文本字段中的输出文本？我希望在开头添加一个字符串，例如'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: 添加到文本字段的开头？

Answer 1

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

Answer 2

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

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

To escape characters in format strings, you can wrap the characters in square brackets.
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>

将自定义文本添加到 bootstrap datetimepicker 中的输出文本字段

Add custom text to the output text field in bootstrap datetimepicker

javascript

datepicker

twitter-bootstrap

eonasdan-datetimepicker