title: How to make datetimepicker to show time in 15 minutes interval
body: <p>This is my binding code</p>
  
  <pre><code>ko.bindingHandlers.datepicker1 = { 
  init: function(element, valueAccessor, allBindingsAccessor) { 
  $(function() { 
  
  
  $(element).parent().datetimepicker({ 
  pickDate: false, 
  pickSeconds: false 
  }); 
  }); 
  //initialize datepicker with some optional options 
  var options = allBindingsAccessor().datepickerOptions || {}; 
  $(element).parent().on('changeDate', function() { 
  $(element).change(); 
  }); 
  
  //when a user changes the date, update the view model 
  ko.utils.registerEventHandler(element, "change", function(event) { 
  //alert("asdf"); 
  
  // var dp = $("#slottotime"); 
  var value = valueAccessor(); 
  var input = $(event.target); 
  var val = input.val(); 
  value(val); 
  //alert(value()); 
  event.stopPropagation(); 
  event.preventDefault(); 
  var currentTime = new Date(); 
  var hours = currentTime.getHours(); 
  currentTime.setMinutes(currentTime.getMinutes() + 30); 
  var minutes = currentTime.getMinutes(); 
  if (minutes &lt; 10) 
  minutes = "0" + minutes; 
  var totime= hours +":"+ minutes ; 
  // dp.val(totime); 
  
  }); 
  }, 
  update: function(element, valueAccessor) { 
  var widget = $(element).data("datetimepicker"); 
  //when the view model is updated, update the widget 
  if (widget) { 
  widget.date = ko.utils.unwrapObservable(valueAccessor()); 
  widget.setValue(); 
  } 
  } 
  }; 
  </code></pre>
  
  <p>This is my markup</p>
  
  <pre><code>&lt;div id="appointments" class="tab-pane "&gt;
                                              Appointments
  
  
  &lt;form id="addDoctorSchedules" data-validate="parsley"&gt;
     &lt;table width="100%" cellspacing="0" cellpadding="0" border="0"&gt;
        &lt;thead&gt;
           &lt;tr&gt;
              &lt;th valign="middle" align="left" style="border-bottom: #edf6f9 solid 1px; border-top: #edf6f9 solid 1px; width: 222px;"&gt;Week Day&lt;/th&gt;
              &lt;th align="center" id="to1"&gt;From Time&lt;/th&gt;
              &lt;th align="center" id="Td1"&gt;To Time&lt;/th&gt;
              &lt;th align="center" id="Td2"&gt;Available Hospital&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
           &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody data-bind='foreach: {data: doctor.schedules, as: "schedule"}'&gt;
           &lt;tr&gt;
              &lt;td width="125" valign="middle" align="left" style="border-bottom: #edf6f9 solid 1px; border-top: #edf6f9 solid 1px;"&gt;
                 &lt;select class="span8" name="day"
                    data-bind="options: $parent.weekdays, value: day, optionsCaption: 'Select Day'" data-required="true" data-trigger="change"&gt;
                 &lt;/select&gt;
              &lt;/td&gt;
              &lt;td align="center" id="Td3"&gt;
                 &lt;div id="datetimepicker3s" class="input-append"&gt;
                    &lt;input type="text" data-format="hh:mm" data-bind="datepicker1:fromtime,value:fromtime" style="width:82px"&gt;
                    &lt;span class="add-on"&gt;
                    &lt;i data-time-icon="icon-time" data-date-icon="icon-calendar" class="icon-time"&gt;
                    &lt;/i&gt;
                    &lt;/span&gt;
                 &lt;/div&gt;
              &lt;/td&gt;
              &lt;td align="center" id="Td4"&gt;
                 &lt;!-- &lt;input type="text" data-format="hh:mm" style="width: 82px"&gt; --&gt;
                 &lt;div id="datetimepicker3" class="input-append"&gt;
                    &lt;input type="text" data-format="hh:mm" data-bind="datepicker1:totime,value:totime" style="width:82px"&gt;
                    &lt;span class="add-on"&gt;
                    &lt;i data-time-icon="icon-time" data-date-icon="icon-calendar" class="icon-time"&gt;
                    &lt;/i&gt;
                    &lt;/span&gt;
                 &lt;/div&gt;
              &lt;/td&gt;
              &lt;td align="center" id="Td8"&gt;
                 &lt;!-- &lt;select class="span8" name="hospital"
                    data-bind="options: $parent.hospitalOptions, value: myHospitalObs, optionsText: 'name', optionsCaption: 'Select Hospital'" data-required="true" data-trigger="change"&gt;
                    &lt;/select&gt; --&gt;
                 &lt;select class="span8" name="hospital"
                    data-bind="options: $root.availableHospitals,
                    value: hospitalId,
                    optionsCaption: 'Select Hospital',
                    optionsText: 'name',
                    optionsValue: 'id'" data-required="true" data-trigger="change"&gt;
                 &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                 &lt;!-- &lt;button class="btn btn-primary" type="button" data-bind="click: $parent.addSlot" value="Add"&gt;Add Timing&lt;/button&gt; --&gt;
                 &lt;a href='#' data-bind='click: $parent.removeSlot'&gt;Remove&lt;/a&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
        &lt;/tbody&gt;
     &lt;/table&gt;
     &lt;button class="btn btn-primary timing" type="button" data-bind="click: $root.addSlot" value="Add"&gt;Add Timing&lt;/button&gt;
  &lt;/form&gt;
  &lt;div class="btn-toolbar" align="center"&gt;
     &lt;div class="btn-group"&gt;
        &lt;a href="#" class="btn" id="appsave"&gt;&lt;i class="cus-disk"&gt;&lt;/i&gt; Save&lt;/a&gt;
     &lt;/div&gt;
     &lt;div class="btn-group" &gt;
        &lt;!-- &lt;a href="#" class="btn" data-bind="click: $root.cancelScheduleModal"&gt;&lt;i class="cus-cancel"&gt;&lt;/i&gt; Cancel&lt;/a&gt; --&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I am using <a href="http://www.eyecon.ro/bootstrap-datepicker/" rel="nofollow">this</a> and example is from <a href="http://tarruda.github.io/bootstrap-datetimepicker/" rel="nofollow">here</a> for datetime picker</p>
  
  <p>The problem is when clicked on the time icon its shows me times in 3 minutes interval like 00 03 06 09</p>
  
  <p>but I want time in 15 mins intervals like 00 15 30 45 ,so can anybody please tell me how to do?</p>