jquery – 沿日期和时间滚动的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：

<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：

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,#81B8F3);
    background-image: -o-linear-gradient(top,#81B8F3);
    background-image: linear-gradient(top,#81B8F3);
}
.ui-slider .ui-slider-handle {
    border-radius: 50%;
    background: #F9FBFA;
    background-image: url('data:image/svg+xml;base64,#C7CED6),#F9FBFA));
    background-image: -webkit-linear-gradient(top,#C7CED6,#F9FBFA);
    background-image: -moz-linear-gradient(top,#F9FBFA);
    background-image: -o-linear-gradient(top,#F9FBFA);
    background-image: linear-gradient(top,#F9FBFA);
    width: 22px;
    height: 22px;
    -webkit-Box-shadow: 0 2px 3px -1px rgba(0,0.6),0 -1px 0 1px rgba(0,0.15) inset,0 1px 0 1px rgba(255,255,0.9) inset;
    -moz-Box-shadow: 0 2px 3px -1px rgba(0,0.9) inset;
    Box-shadow: 0 2px 3px -1px rgba(0,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,0 1px 0 0 white;
    Box-shadow: 0 1px 1px 1px rgba(22,0 1px 0 0 #FFF;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.5em;
    margin-left: -.6em;
}
.ui-slider a:focus {
    outline:none;
}

您需要将日期时间视为时间戳,只需使用标准滑块作为整数,重新计算输入(或其他任何)滑块移动事件的日期时间.

原文地址：https://www.jb51.cc/jquery/176811.html