3

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?

VincenzoC
  • 30,117
  • 12
  • 90
  • 112
Single Entity
  • 2,925
  • 3
  • 37
  • 66
  • try adding format: 'Departure DD/MM/YYYY HH:mm:ss' to your second statement. Check this fiddle: http://jsfiddle.net/4GP9c/3/ – NepCoder Mar 29 '17 at 15:03
  • Your fiddle is exactly what I'm after, I'm now trying to suss out why it works in your fiddle but in my code it parses the letters of Hello with values which is why I asked this question on SO, as I had already tried this. Interesting! – Single Entity Mar 29 '17 at 15:17
  • Ok, yours works because its using a different date-time picker, please see link in the question for the one I am using. Thanks anyway! – Single Entity Mar 29 '17 at 15:25

2 Answers2

4

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>
Single Entity
  • 2,925
  • 3
  • 37
  • 66
VincenzoC
  • 30,117
  • 12
  • 90
  • 112
  • 1
    Excellent, thanks for explaining the reason behind it too, I knew the library used moment, but i didn't know moment had an escape sequence. – Single Entity Mar 29 '17 at 16:43
  • You are welcome, glad to help. I know that moment escaping character section was not so easy to reach from datetimepicker docs. – VincenzoC Mar 29 '17 at 17:54
0
$('input').val('Departing: ' + pickedDate.toString());
karthikaruna
  • 3,042
  • 7
  • 26
  • 37
  • I've thought of this, but it would need to be fired whenever there is a change to the date, which is possible as there are event handlers for this, but I was trying to avoid this solution in the hope there was a tidier one. – Single Entity Mar 29 '17 at 15:28