时间的 JQuery UI 滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2279784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI Slider for time
提问by Nisanth Kumar
Hi I need to implement a slider for 24 hour time range . I like to use jquery ui slider for this . I have written below code
嗨，我需要实现一个 24 小时时间范围的滑块。我喜欢为此使用 jquery ui 滑块。我写了下面的代码
<script type="text/javascript">
$(function() {
$(".slider-range").slider({
range: true,
min: 0,
max: 23.59,
step: 0.15
});
});
</script>
I like the range is like 01:00----01:59
我喜欢的范围是 01:00----01:59
How i gave the colon(:) instead of dot(.) . Also the range waas gone beyond 59 like 05:85 . Please help me to create a time slider
我如何给冒号(:) 而不是点(.) 。范围也超过了 59 像 05:85 。请帮我创建一个时间滑块
回答by Tatu Ulmanen
Do not use hours as a unit, use minutes instead. Then apply a slideevent that converts the minutes to hours:
不要以小时为单位，而应使用分钟。然后应用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);
}
});
});
回答by Jeff Weinberg
Improving on Tatu's answer, to get the time range in "civilian time," with a 12 hour clock and AM and PM designations. Here is a JSFIDDLE
改进 Tatu 的答案，获得“平民时间”的时间范围，具有 12 小时制和 AM 和 PM 指定。这是一个JSFIDDLE
*Update - I changed the code slightly so that the min value displays as "12:00 AM" and the max value displays as "11:59 PM." The fiddle is also updated...
*更新 - 我稍微更改了代码，以便最小值显示为“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);
}
});
回答by upplex
Here is my 24 hours version based on both of the answers for input fields
这是我基于输入字段的两个答案的 24 小时版本
Javascript
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
HTML
<label for="amount-time">Time</label>
<input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/>
<div id="slider-time"></div><br>
回答by Gilman
It should just be hours2 < 10 and minutes2 < 10, not hours2.length < 10 and minutes2.length < 10. This is evaluation of numeric value not string length.
它应该只是 hours2 < 10 和 minutes2 < 10，而不是 hours2.length < 10 和 minutes2.length < 10。这是对数值而不是字符串长度的评估。
