Question

我有一个时间表，我使用jQuery自动计算开始时间和停止时间之间的值，然后根据开始时间和停止时间的值动态填充其他输入框。直到我的老板想将开始和停止时间更改为仅以30分钟为增量，这样工作正常，所以7:00 AM，7：30 AM等。因此，由于我不知道制作html的方法“时间”标记以30分钟为增量，我只是将输入更改为选择，并保持所有类名和字段名相同，并添加了选项值。该表格仍然有效，我在想要的所有框中获取了我的值，并且也将它们总计在一起，但是现在这些值不能正确地相加。如果您在开始时选择8:00 AM，在停止处选择8:00 PM，则总计为24，而不是12。似乎最多可以使用10个小时，那么它就会崩溃。我还注意到从10:00 AM到11:00 PM总共只有1个小时。 Here is the fiddle:
有人可以告诉我为什么当该字段为输入但现在却是选择项时却无法使用吗？

//Event on change in START or STOP.
$(".start, .stop").on('change', function() {
//Look into $(this) to find the new TR group (row) with the class rowTR.
//This is dynamic and works for all ROWS modified
var start = $(this).parent().parent().find('.start').val().split(':');
var stop = $(this).parent().parent().find('.stop').val().split(':');
var hours1 = parseInt(start[0], 10) || 0;
hours2 = parseInt(stop[0], 10) || 0;
mins1 = parseInt(start[1], 10) || 0;
mins2 = parseInt(stop[1], 10) || 0;
var hours = hours2 - hours1,
    mins = 0;
if (hours < 0) hours = 24 + hours;
if (mins2 >= mins1) {
    mins = mins2 - mins1;
} else {
    mins = (mins2 + 60) - mins1;
    hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
$(this).parent().parent().find('.hours').val(hours);
$(this).parent().parent().find('.dailyTotalGeneric').val(hours);
//Calculate all the daily total by row.
calculateWeeklyTotal()
});
$(".lunch").on('change', function() {
//get the value
var num = parseFloat($(this).parent().parent().find('.dailyTotalGeneric').val());
//If is checked, the lunch will be discount from hours.
if ($(this).is(':checked')) {
    //Use newNum with discount of LUNCH
    $(this).parent().parent().find('.dailyTotalGeneric').val(num - 0.5);
} else {
    //else, add 0.5 to hours
    $(this).parent().parent().find('.dailyTotalGeneric').val(num + 0.5);
}
//Calculate the daily total again
calculateWeeklyTotal()
});

function calculateWeeklyTotal() {
var total = 0;
$('.dailyTotalGeneric').each(function() {
    total += ($(this).val() && !isNaN($(this).val())) ? parseFloat ($(this).val()) : parseFloat(0);
});
//Only 2 decimals
$('#total').val(total.toFixed(2))
}

Answer 1

将选项值更改为24小时格式

$PATH

然后更新更改功能

<option value="00:00">12:00 AM</option>
<option value="00:30">12:30 AM</option>
<option value="01:00">1:00 AM</option>
<option value="01:30">1:30 AM</option>
...
<option value="22:30">10:30 PM</option>
<option value="23:00">11:00 PM</option>
<option value="23:30">11:30 PM</option>

Answer 2

在阅读了Chris Cousins回答中给我的笔记后，我进行了一些研究，发现以半小时为增量显示时间标记并不困难。只需使用$html = <div class="{$id} field {$type}" style="top: {$top}; left: {$left}; width: {$width} ; color: {$fg}; background-color: {$bg}"></div> <script>$(".{$id}").text(pxformat("{$type}", "{$format}","{$data}","{$decPlaces}"))</script>属性，即可：

step

步长必须以秒为单位，因此需要1800秒半小时。 Here's上的文档，这可能会给您带来其他有趣的想法。请注意，文档中有一些警告，建议在某些浏览器中使用<input type="time" step="1800">可能会出现一些问题（似乎在Chrome中可以正常使用）。

Answer 3

更改功能的顶部，以便用空格分隔值，然后标识 AM 或 PM 。对于PM，每小时会增加12个小时。

var startParts = $(this).parent().parent().find('.start').val().split(' ');
var start = startParts[0];
var startType = startParts[1];
var stopParts = $(this).parent().parent().find('.stop').val().split(' ');
var stop = stopParts[0];
var stopType = stopParts[1];

var hours1 = parseInt(start[0], 10) || 0;
hours2 = parseInt(stop[0], 10) || 0;
mins1 = parseInt(start[1], 10) || 0;
mins2 = parseInt(stop[1], 10) || 0;

if (startType == 'PM') {
  hours1+= 12;
}
if (stopType == 'PM') {
  hours2+= 12;
}

将标签从输入更改为选择时，jQuery代码中断

3 个答案: