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

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.