How to make datetimepicker to show time in 15 minutes interval

Question

This is my binding 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 < 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(); 
} 
} 
}; 

This is my markup

<div id="appointments" class="tab-pane ">
                                            Appointments


<form id="addDoctorSchedules" data-validate="parsley">
   <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <thead>
         <tr>
            <th valign="middle" align="left" style="border-bottom: #edf6f9 solid 1px; border-top: #edf6f9 solid 1px; width: 222px;">Week Day</th>
            <th align="center" id="to1">From Time</th>
            <th align="center" id="Td1">To Time</th>
            <th align="center" id="Td2">Available Hospital</th>
            <th></th>
         </tr>
      </thead>
      <tbody data-bind='foreach: {data: doctor.schedules, as: "schedule"}'>
         <tr>
            <td width="125" valign="middle" align="left" style="border-bottom: #edf6f9 solid 1px; border-top: #edf6f9 solid 1px;">
               <select class="span8" name="day"
                  data-bind="options: $parent.weekdays, value: day, optionsCaption: 'Select Day'" data-required="true" data-trigger="change">
               </select>
            </td>
            <td align="center" id="Td3">
               <div id="datetimepicker3s" class="input-append">
                  <input type="text" data-format="hh:mm" data-bind="datepicker1:fromtime,value:fromtime" style="width:82px">
                  <span class="add-on">
                  <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="icon-time">
                  </i>
                  </span>
               </div>
            </td>
            <td align="center" id="Td4">
               <!-- <input type="text" data-format="hh:mm" style="width: 82px"> -->
               <div id="datetimepicker3" class="input-append">
                  <input type="text" data-format="hh:mm" data-bind="datepicker1:totime,value:totime" style="width:82px">
                  <span class="add-on">
                  <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="icon-time">
                  </i>
                  </span>
               </div>
            </td>
            <td align="center" id="Td8">
               <!-- <select class="span8" name="hospital"
                  data-bind="options: $parent.hospitalOptions, value: myHospitalObs, optionsText: 'name', optionsCaption: 'Select Hospital'" data-required="true" data-trigger="change">
                  </select> -->
               <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">
               </select>
            </td>
            <td>
               <!-- <button class="btn btn-primary" type="button" data-bind="click: $parent.addSlot" value="Add">Add Timing</button> -->
               <a href='#' data-bind='click: $parent.removeSlot'>Remove</a>
            </td>
         </tr>
      </tbody>
   </table>
   <button class="btn btn-primary timing" type="button" data-bind="click: $root.addSlot" value="Add">Add Timing</button>
</form>
<div class="btn-toolbar" align="center">
   <div class="btn-group">
      <a href="#" class="btn" id="appsave"><i class="cus-disk"></i> Save</a>
   </div>
   <div class="btn-group" >
      <!-- <a href="#" class="btn" data-bind="click: $root.cancelScheduleModal"><i class="cus-cancel"></i> Cancel</a> -->
   </div>
</div>
</div>

and I am using this and example is from here for datetime picker

The problem is when clicked on the time icon its shows me times in 3 minutes interval like 00 03 06 09

but I want time in 15 mins intervals like 00 15 30 45 ,so can anybody please tell me how to do?

Answer 1

After review of the source the root of the problem is found in

fillMinutes: function() {
  var table = this.widget.find(
    '.timepicker .timepicker-minutes table');
  table.parent().hide();
  var html = '';
  var current = 0;
  for (var i = 0; i < 5; i++) {
    html += '<tr>';
    for (var j = 0; j < 4; j += 1) {
      var c = current.toString();
      html += '<td class="minute">' + padLeft(c, 2, '0') + '</td>';
      current += 3; //HERE
    }
    html += '</tr>';
  }
  table.html(html);
}

The call to the function occurs only once in the init of the widget. Thus, you can use jQuery to look up the element and insert the html you desire.

(function () {

 var table = $('.timepicker .timepicker-minutes table');
 table.parent().hide();
 var html = "";
 var current = 0;
 while (current < 60) {
    var c = current.toString();
    html += '<td class="minute">' + padLeft(c) + '</td>';
    current += 15;
 }

 table.html(html);
})();

Modifying padLeft from the original source to fit the circumstances:

var padLeft = function padLeft(s) {
 if (2 < s.length){ return s;}
 return Array(2 - s.length + 1).join('0') + s;
};

See this fiddle