Change the time format of the Bootstrap Time Picker

The plugin has no apparent option (at least not any listed in the documentation) to make the result have the format HH: mm: ss.

A somewhat hacky way to fix it would be to change the default operation of the plugin. For example, looking at the code of the plugin you can see that the time is written inside the method getTime ( looks better in the non-minified version ):

getTime: function() {
  if (this.hour === '') {
    return '';
  }

  return this.hour + ':' + (this.minute.toString().length === 1 ? '0' + this.minute : this.minute) + (this.showSeconds ? ':' + (this.second.toString().length === 1 ? '0' + this.second : this.second) : '') + (this.showMeridian ? ' ' + this.meridian : '');
}

In this function, if the minutes are less than 10 (they have a length equal to 1) then a 0 is added in front ... but the same is not done with the hours. You could apply the same code that adds the 0 in the minutes but at the hours:

getTime: function() {
  if (this.hour === '') {
    return '';
  }
  return (this.hour.toString().length === 1 ? '0' + this.hour : this.hour) + ':' + (this.minute.toString().length === 1 ? '0' + this.minute : this.minute) + (this.showSeconds ? ':' + (this.second.toString().length === 1 ? '0' + this.second : this.second) : '') + (this.showMeridian ? ' ' + this.meridian : '');
}

Now, I'm not saying that you rewrite the original plugin file (something I do not recommend), but you can redefine some part once it's loaded. So you could redefine the getTime method in the following way:

$.fn.timepicker.Constructor.prototype.getTime = function() {
  if (this.hour === '') {
    return '';
  }
  return (this.hour.toString().length === 1 ? '0' + this.hour : this.hour) + ':' + (this.minute.toString().length === 1 ? '0' + this.minute : this.minute) + (this.showSeconds ? ':' + (this.second.toString().length === 1 ? '0' + this.second : this.second) : '') + (this.showMeridian ? ' ' + this.meridian : '');
}

And it already puts the hours with two digits always, as you can see here:

  

Note: this only works on the input of the date and not on the popup / widget that appears. If you want to also do it in the widget you should redefine the updateWidget method too ... although after so many modifications it might be better to suggest those changes in the plugin git.

$(document).ready(function() {

  $.fn.timepicker.Constructor.prototype.getTime = function() {
    if (this.hour === '') {
      return '';
    }
    return (this.hour.toString().length === 1 ? '0' + this.hour : this.hour) + ':' + (this.minute.toString().length === 1 ? '0' + this.minute : this.minute) + (this.showSeconds ? ':' + (this.second.toString().length === 1 ? '0' + this.second : this.second) : '') + (this.showMeridian ? ' ' + this.meridian : '');
  }

  $('#fechaInicio').timepicker({
    useCurrent: false,
    format: 'HH:mm:ss',
    minuteStep: 1,
    showSeconds: true,
    showMeridian: false,
    disableFocus: true,
    icons: {
      up: 'fa fa-chevron-up',
      down: 'fa fa-chevron-down'
    }
  }).on('focus', function() {
    $('#fechaInicio').timepicker('showWidget');
  });



});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>

<input id="fechaInicio" class="form-control" />