Leaving field blank but showing a start hour?

I am trying to set up start times for the day. When the time picker shows, it keeps saying 12 : 00 AM. I want the times to start at 10 : 00 AM, and increment by 30 minutes. I am using enabledHours to limit the input. I am also using useCurrent: false so that the input field is empty when the page is loaded.

Basically am using this:

format: 'LT',
stepping: 30,
enabledHours: [10, 11, . . . 19],
minDate: moment().hour(10),
useCurrent: false,
showClose: true,
allowInputToggle: true

I have a separate input for the date, all I want to show is the time.

Any help is appreciated.

Solution

The easiest way to set starting date for datetime picker is using defaultDate option. Setting this option, the picker input field will be populated with the given date, as you can see in the live example:

$("#datetimepicker1").datetimepicker({
  format: 'LT',
  stepping: 30,
  minDate: moment({hour: 10}),
  maxDate: moment({hour: 19, minutes: 30}),
  defaultDate: moment({hour: 10}),
  useCurrent: false,
  showClose: true,
  allowInputToggle: true
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/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.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="input-group date" id="datetimepicker1">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

If the input has to be initally blank, then you have to do something a little bit complex. You can listen for dp.show event and set a given date (using date method) if no previous date was set.

Here a live working example:

$("#datetimepicker1").datetimepicker({
  format: 'LT',
  stepping: 30,
  minDate: moment({hour: 10}),
  maxDate: moment({hour: 19, minutes: 30}),
  useCurrent: false,
  showClose: true,
  allowInputToggle: true
}).on('dp.show', function(){
  var date = $(this).data("DateTimePicker").date();
  if( !date ){
    var defaultDate = moment({hour: 10});
    $(this).data("DateTimePicker").date(defaultDate);
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/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.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="input-group date" id="datetimepicker1">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

Please note that I used minDate and maxDate instead of enabledHours, since you are selecting only time. Moreover I used moment({hour: 10}) instead of moment().hour(10) because the first (moment({unit: value, ...});) defaults to 0 for minutes, seconds, milliseconds while the latter takes in account current minutes, seconds etc.