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?
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>
$('input').val('Departing: ' + pickedDate.toString());