Add custom text to the output text field in bootstrap datetimepicker

Question

I'm using bootstrap 3 date/time picker here:

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

Is it possible to customise the output text in the date/time text field? I wish to add a string at the start, such as 'Departure:'.

My current set up is very simple, the javascript is simply:

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

The HTML is:

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

This will display the date and time as per the formatting given in the code. How can I add the string Departing: to the beginning of the text field?

Answer 1

You have to use square brackets in your format option, because the component uses moment tokens.

Moment docs has an Escaping characters section which states:

To escape characters in format strings, you can wrap the characters in square brackets.

moment().format('[today] dddd'); // 'today Sunday'

Here is a working sample:

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