How to have just the time picker in a bootstrap 3 date/time picker widget with an added string in format

Question

My question refers to the following bootstrap 3 date time picker:

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

I have a bootstrap 3 date and time picker widget on a website, but would actually like it to be just a time picker.

This is normally trivial to achieve, and can be done using the format parameter as follows:

$('#datetimepicker').datetimepicker({defaultDate:'now',ignoreReadonly: true});
$('#datetimepicker').data("DateTimePicker").format('LT');

Note the LT for local time, or you could use:

$('#datetimepicker').data("DateTimePicker").format('HH:mm:ss');

Both of these work as we've removed any reference to date.

However, my issue is that I use an additional string in my text field, so my code actually looks like this:

$('#datetimepicker').datetimepicker({defaultDate:'now',ignoreReadonly: true});
$('#datetimepicker').data("DateTimePicker").format('[Departing at:] LT');

This comes from my previous question here:

Add custom text to the output text field in bootstrap datetimepicker

This works fine in that the text field shows:

But it still contains a date widget. How can I remove the date widget?

If this isn't possible, is there a way to have the time widget appear first by default, that would suffice.

I should point out that I have tried removing the

defaultDate:'now'

code in case it was forcing the date picker to appear, but that doesn't help.

Answer 1

It's a bug of the datetimepicker, if you look at the code you will see that it internally uses the isEnabled function to determine which component to show. The isEnabled determines if the date picker should be shown checking if the format contains a D (case insensitive). Unfortunately, it does not takes in account string escaping [].

If the format option does not contain Y, M, d and D, the component will work as expected, as shown in the following example:

$('#datetimepicker').datetimepicker({
  defaultDate:'now',
  ignoreReadonly: true,
  format: '[abc:] LT'
});

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

---

I found that is a already known issue and there is a open pull request that tries to fix it. If you need, you can try to change the libary code locally with the code proposed by the pull request.