JQuery UI Slider的时间
嗨，我需要实现24小时时间范围的滑块。 我喜欢使用jquery ui slider。 我写了下面的代码
$(function() { $(".slider-range").slider({ range: true, min: 0, max: 23.59, step: 0.15 }); }); 我喜欢的范围就像01:00 —- 01:59
我如何给结肠（:)而不是点（。）。 此外，范围等于超过59，如05:85。 请帮我创建一个时间滑块
不要将小时作为一个单位，而是使用分钟。 然后应用将分钟转换为小时的slide事件：
$(function() { $(".slider-range").slider({ range: true, min: 0, max: 1440, step: 15, slide: function(e, ui) { var hours = Math.floor(ui.value / 60); var minutes = ui.value - (hours * 60); if(hours.toString().length == 1) hours = '0' + hours; if(minutes.toString().length == 1) minutes = '0' + minutes; $('#something').html(hours+':'+minutes); } }); });
改善Tatu的答案，获得“平民时间”的时间范围，12小时时钟和AM和PM指定。 这是一个JSFIDDLE
*更新 – 我稍微更改了代码，以便最小值显示为“12:00 AM”，最大值显示为“11:59 PM”。 小提琴也更新了……
$( "#slider-range" ).slider({ range: true, min: 0, max: 1440, step: 15, values: [ 600, 720 ], //or whatever default time you want slide: function(e, ui) { var hours1 = Math.floor(ui.values[0] / 60); var minutes1 = ui.values[0] - (hours1 * 60); if(hours1.length == 1) hours1 = '0' + hours1; if(minutes1.length == 1) minutes1 = '0' + minutes1; if(minutes1 == 0) minutes1 = '00'; if(hours1 >= 12){ if (hours1 == 12){ hours1 = hours1; minutes1 = minutes1 + " PM"; } else{ hours1 = hours1 - 12; minutes1 = minutes1 + " PM"; } } else{ hours1 = hours1; minutes1 = minutes1 + " AM"; } if (hours1 == 0){ hours1 = 12; minutes1 = minutes1; } $('.slider-time').html(hours1+':'+minutes1); var hours2 = Math.floor(ui.values[1] / 60); var minutes2 = ui.values[1] - (hours2 * 60); if(hours2.length == 1) hours2 = '0' + hours2; if(minutes2.length == 1) minutes2 = '0' + minutes2; if(minutes2 == 0) minutes2 = '00'; if(hours2 >= 12){ if (hours2 == 12){ hours2 = hours2; minutes2 = minutes2 + " PM"; } else if (hours2 == 24){ hours2 = 11; minutes2 = "59 PM"; } else{ hours2 = hours2 - 12; minutes2 = minutes2 + " PM"; } } else{ hours2 = hours2; minutes2 = minutes2 + " AM"; } $('.slider-time2').html(hours2+':'+minutes2); } });
这是我的24小时版本，基于输入字段的两个答案
使用Javascript
jQuery(function() { jQuery('#slider-time').slider({ range: true, min: 0, max: 1440, step: 15, values: [ 600, 1200 ], slide: function( event, ui ) { var hours1 = Math.floor(ui.values[0] / 60); var minutes1 = ui.values[0] - (hours1 * 60); if(hours1.length < 10) hours1= '0' + hours; if(minutes1.length < 10) minutes1 = '0' + minutes; if(minutes1 == 0) minutes1 = '00'; var hours2 = Math.floor(ui.values[1] / 60); var minutes2 = ui.values[1] - (hours2 * 60); if(hours2.length < 10) hours2= '0' + hours; if(minutes2.length < 10) minutes2 = '0' + minutes; if(minutes2 == 0) minutes2 = '00'; jQuery('#amount-time').val(hours1+':'+minutes1+' - '+hours2+':'+minutes2 ); } }); });
HTML
这是一个例子：
upplex - 网页设计
它应该是小时2 <10和分钟2 <10，而不是hours2.length <10和minutes2.length <10。这是数值的评估而不是字符串长度。