沿着日期和时间滚动的Javascript滑块
我已经看到了一些选择日期范围的jQuery滑块的好例子： http ： //ghusse.github.com/jQRangeSlider/stable/demo/
时间范围： http ： //marcneuwirth.com/blog/2011/05/22/revisiting-the-jquery-ui-time-slider/
但是我正在寻找能够选择日期范围到月，日，分钟的东西。 能够将它作为日期范围选择器和普通滑块都很棒。
有没有人见过这样的实现？ 使用Unix时间作为我的值的正常jQuery UI滑块是否有意义？
这是我的小提琴（我也在找东西，然后决定创建一个）： http ： //jsfiddle.net/Lcrsd3jt/45/
HTML：
Time Range: -
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：
#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; }
您需要将日期时间视为时间戳，只需使用标准滑块进行整数，重新计算滑块移动事件中的输入（或其他任何内容）的日期时间。
如果有人找到这个post，我可以通过将我的时间戳转换为unix时间然后按月分解我的数据来实现这一点。 当前月份的滑块会扩展到屏幕的全宽，因此您可以通过擦洗尽可能多地选择。 箭头键完成剩下的工作。