logo标签列表

JavaScript滑块可以同时在日期和时间上滚动。

jqueryjquery-uiuisliderdatetimepicker
7
1
欢迎来到Stack Overflow！不幸的是，对于这个问题的寿命来说，Stack Overflow并不是一个推荐引擎。 - Matt Ball
1
@MattBall：他不是在寻求建议。他正在寻找解决方案。他想知道是否有人见过类似的控件，这样他就不需要自己编写了。这里没有任何建议，对吗？没有。 - Robert Koritnik
你期望你的范围滑块有多长？因为如果你将粒度设置到分钟级别并且你的范围足够长，很可能你无法选择所有可能的值。但是，使用三个滑块（第一个用于设置日期，第二个和第三个用于设置这两个日期的时间）可以正确完成。你需要考虑这种控件的可用性以及如何使其易于使用。因为你首先需要拖动日期选择器，然后在释放手柄时打开时间选择器。 - Robert Koritnik
@RobertKoritnik 好的，这里是另一个更具体的元问题，可以支持我的观点: http://meta.stackexchange.com/questions/129153/are-im-looking-for-xyz-project-plugin-library-for-language-zyx-on-topic - Matt Ball
@MattBall：好的，这是真的。这个问题可能会导致回答带有链接，但不一定。我建议tfridge重新表述问题或提出一个新问题，这将导致更多的开发类似的回答。但是我仍然会保持原样。SO上有很多类似的问题，并且该问题具有特定的要求，可能以前没有被解决，因此它很可能吸引到包含代码或至少解决方案建议的答案。这应该是对这个问题的良好回答。但在某种程度上你是对的。 - Robert Koritnik
显示剩余2条评论
2个回答
16

这是我为此创建的示例(fiddle)链接（我之前也在寻找类似的东西，后来决定自己创造一个）：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));
    }
});

样式表：

#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;
}
您需要将日期时间视为时间戳，并仅使用标准滑块来处理整数，根据滑块移动事件即时重新计算日期时间的输入（或其他内容）。
看起来很整洁。但是在那个jsFiddle上我遇到了一个错误，它说“closestHandle未定义”。 - mhkeller
我刚刚重新检查了fiddle链接 - 在我的Chrome 40.0.2214.93中它完全正常工作。你使用哪个浏览器遇到问题了？ - Vladimir T
1
不错的工作..但这在Mozilla浏览器中无法运行。有人可以帮忙吗？最接近的Handle未定义，显示错误。 - Megha Paul
嗨，保罗，我发现我使用的日期格式似乎不受Firefox支持。只需将日期更改为 var dt_from =“2014/11/01 00:34:44”; var dt_to =“2014/11/24 16:37:43”; （斜杠而不是破折号） 在Firefox中也可以正常工作。 - Vladimir T
3

如果有人看到这个帖子，我成功地通过将我的时间戳转换为Unix时间并按月份分开我的数据来实现此目的。当前月份的滑块会展开到整个屏幕宽度，因此您可以通过拖动选择尽可能多的内容。剩下的部分可以使用箭头键完成。

我需要在Jquery UI滑块中使用箭头键双向滚动。谢谢。 - heyjii
这个功能已经内置在jQuery UI中了 http://jqueryui.com/slider/. 需要将手柄聚焦，所以您可以使用.focus()通过JS设置聚焦 https://dev59.com/ZnA75IYBdhLWcg3wRW2c 如果您需要更多帮助，也许可以单独开一个帖子来询问。 - mhkeller
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接