1

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:

enter image description here

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.

Community
  • 1
  • 1
Single Entity
  • 2,925
  • 3
  • 37
  • 66

1 Answers1

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.

VincenzoC
  • 30,117
  • 12
  • 90
  • 112
  • Sir, you are indeed the authority on this library! – Single Entity Mar 30 '17 at 13:01
  • I suppose I could change it to 'Leaving at' instead! – Single Entity Mar 30 '17 at 13:02
  • Thank you Sir, here to help (on stackoverflow you can find also the main developer of this libary). Don't forget to use `eonasdan-datetimepicker` tag instead of `bootstrap-datepicker` when asking about this libary. Anyway I've edited my answer giving the link to the already known issue (and its fix attempt). – VincenzoC Mar 30 '17 at 13:25
  • Thanks, I'll grab the pull request and see if that solves it locally for the time being. Sorry about the tag, I did the same thing last time. I'll get it right next time! :) – Single Entity Mar 30 '17 at 13:40