Javascript 如何使datetimepicker以15分钟的间隔显示时间

这是我的绑定代码

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(); 
} 
} 
}; 

ko.bindingHandlers.datepicker1={
init:function（元素、valueAccessor、allBindingsAccessor）{
$（函数（）{
$（元素）.parent（）.datetimepicker（{
pickDate:false，
pickSeconds:错误
}); 
}); 
//使用一些可选选项初始化日期选择器
var options=allBindingsAccessor（）.datepickerOptions | |{}；
$（element）.parent（）.on（'changeDate'，function（）{
$（元素）.change（）；
}); 
//当用户更改日期时，更新视图模型
registerEventHandler（元素，“更改”，函数（事件）{
//警报（“asdf”）；
//var dp=$（“时差”）；
var value=valueAccessor（）；
var输入=$（event.target）；
var val=input.val（）；
价值（val）；
//警报（value（））；
event.stopPropagation（）；
event.preventDefault（）；
var currentTime=新日期（）；
var hours=currentTime.getHours（）；
currentTime.setMinutes（currentTime.getMinutes（）+30）；
var minutes=currentTime.getMinutes（）；
如果（分钟<10）
分钟=“0”+分钟；
var totime=小时+“：”+分钟；
//dp.val（totime）；
}); 
}, 
更新：函数（元素，值访问器）{
var小部件=$（元素）.data（“日期时间选择器”）；
//更新视图模型时，更新小部件
如果（小部件）{
widget.date=ko.utils.unwrapObservable（valueAccessor（））；
setValue（）；
} 
} 
}; 

这是我的标记

<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>

约会
星期日
不时
按时
可用医院
添加计时

我使用的是datetime选择器的示例

问题是当点击时间图标时，它会以3分钟的间隔显示时间，如00 03 06 09

但是我需要15分钟的时间间隔，比如00 15 30 45，那么有人能告诉我怎么做吗？

在回顾了问题的根源之后，在

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);
}

从原始来源修改

padLeft

，以适应环境：

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

var padLeft=函数padLeft（s）{
如果（2

---

请参见

如果您只将代码裁剪到相关部分，并通过格式化程序运行html和js，这将有所帮助。这使我们的帮助变得容易多了。@Jeroen谢谢你的建议，我将删除不需要的内容lines@Jeroen我已经格式化了，您正在使用的引导日期/时间选择器的文档中没有关于更改/限制时间选项的任何详细信息。你可能必须自己动手修改代码。@PatrickSteele你能给我一些提示吗？当我点击输入字段datepicker没有在Fiddle中打开时，我对hql有一些疑问，你能来聊天吗？

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