jQuery 沿日期和时间滚动的 Javascript 滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10466851/
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
Javascript slider that scrolls along both dates and times
提问by mhkeller
I've seen some nice examples of jQuery sliders that select date ranges: http://ghusse.github.com/jQRangeSlider/stable/demo/
我已经看到了一些很好的选择日期范围的 jQuery 滑块示例：http: //ghusse.github.com/jQRangeSlider/stable/demo/
And time ranges: http://marcneuwirth.com/blog/2011/05/22/revisiting-the-jquery-ui-time-slider/
和时间范围：http: //marcneuwirth.com/blog/2011/05/22/revisiting-the-jquery-ui-time-slider/
But I'm looking for something that will be able to select date ranges down to the month, day, minute. It would be great to be able to have it as both a date range selector and a plain slider.
但我正在寻找能够选择精确到月、日、分钟的日期范围的东西。能够将它同时用作日期范围选择器和普通滑块会很棒。
Has anyone seen an implementation like that? Would the normal jQuery UI slider using Unix time as my values make sense?
有没有人见过这样的实现？使用 Unix 时间作为我的值的普通 jQuery UI 滑块是否有意义？
采纳答案by mhkeller
In case anyone finds this thread, I was able to accomplish this by converting my time stamps to unix time and then breaking up my data by month. The current month's slider expands to the full-width of the screen so you can select as much as possible by scrubbing. Arrow keys accomplish the rest.
万一有人找到这个线程，我可以通过将我的时间戳转换为 unix 时间然后按月分解我的数据来实现这一点。当前月份的滑块会扩展到整个屏幕宽度，因此您可以通过滑动来尽可能多地选择。箭头键完成其余的工作。
回答by Vladimir T
Here is my fiddle for this (I was also looking for something and then decided to create one): http://jsfiddle.net/Lcrsd3jt/45/
这是我的小提琴（我也在寻找一些东西然后决定创建一个）：http: //jsfiddle.net/Lcrsd3jt/45/
html:
html：
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="time-range">
<p>Time Range: <span class="slider-time"></span> - <span class="slider-time2"></span>
</p>
<div class="sliders_step1">
<div id="slider-range"></div>
</div>
</div>
js:
js：
var dt_from = "2014/11/01 00:34:44";
var dt_to = "2014/11/24 16:37:43";
$('.slider-time').html(dt_from);
$('.slider-time2').html(dt_to);
var min_val = Date.parse(dt_from)/1000;
var max_val = Date.parse(dt_to)/1000;
function zeroPad(num, places) {
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}
function formatDT(__dt) {
var year = __dt.getFullYear();
var month = zeroPad(__dt.getMonth()+1, 2);
var date = zeroPad(__dt.getDate(), 2);
var hours = zeroPad(__dt.getHours(), 2);
var minutes = zeroPad(__dt.getMinutes(), 2);
var seconds = zeroPad(__dt.getSeconds(), 2);
return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
};
$("#slider-range").slider({
range: true,
min: min_val,
max: max_val,
step: 10,
values: [min_val, max_val],
slide: function (e, ui) {
var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
$('.slider-time').html(formatDT(dt_cur_from));
var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
$('.slider-time2').html(formatDT(dt_cur_to));
}
});
css:
css：
#time-range p {
font-family:"Arial", sans-serif;
font-size:14px;
color:#333;
}
.ui-slider-horizontal {
height: 8px;
background: #D7D7D7;
border: 1px solid #BABABA;
box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
clear: both;
margin: 8px 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider-horizontal .ui-slider-range {
top: -1px;
height: 100%;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
height: 8px;
font-size: .7em;
display: block;
border: 1px solid #5BA8E1;
box-shadow: 0 1px 0 #AAD6F6 inset;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #81B8F3;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
background-image: linear-gradient(top, #A0D4F5, #81B8F3);
}
.ui-slider .ui-slider-handle {
border-radius: 50%;
background: #F9FBFA;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
background-image: linear-gradient(top, #C7CED6, #F9FBFA);
width: 22px;
height: 22px;
-webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
-webkit-transition: box-shadow .3s;
-moz-transition: box-shadow .3s;
-o-transition: box-shadow .3s;
transition: box-shadow .3s;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 22px;
height: 22px;
cursor: default;
border: none;
cursor: pointer;
}
.ui-slider .ui-slider-handle:after {
content:"";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
top: 50%;
margin-top: -4px;
left: 50%;
margin-left: -4px;
background: #30A2D2;
-webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
-moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.5em;
margin-left: -.6em;
}
.ui-slider a:focus {
outline:none;
}
You need to treat date-time as timestamp and just use standard slider for integer, recalculating date-time for the input (or whatever else) on the fly on slider move event.
您需要将日期时间视为时间戳，只需将标准滑块用于整数，在滑块移动事件中即时重新计算输入（或其他任何内容）的日期时间。
