这是我的绑定代码

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,所以有人可以告诉我该怎么做吗?

最佳答案

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

10-07 13:45
查看更多