javascript - 如何让datetimepicker以15分钟的间隔显示时间

Question

这是我的绑定(bind)代码

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

这是我的标记

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

我正在使用this示例来自 here对于日期时间选择器

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

但我想要 15 分钟间隔的时间，例如 00 15 30 45，所以有人可以告诉我该怎么做吗？

Answer 1

审核the source后问题的根源在于

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

对该函数的调用仅在小部件的 init 中发生一次。因此，您可以使用 jQuery 查找元素并插入您想要的 html。

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

从原始源修改 padLeft 以适应情况:

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

参见this fiddle