Question

我在这里使用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：添加到文本字段的开头？

Answer 1

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

Moment docs有转义字符 section，其中说明：

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

以下是一份工作样本：

＆＃13;

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

＆＃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;

Answer 2

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

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

2 个答案: