Javascript слайдер, который прокручивает как по дате, так и по времени

Я видел несколько хороших примеров ползунков jQuery, которые выбирают диапазоны дат:http://ghusse.github.com/jQRangeSlider/stable/demo/

И временные диапазоны:http://marcneuwirth.com/blog/2011/05/22/revisiting-the-jquery-ui-time-slider/

Но я ищу что-то, что сможет выбирать диапазоны дат вплоть до месяца, дня, минуты. Было бы здорово иметь его в качестве селектора диапазона дат и простого слайдера.

Кто-нибудь видел такую реализацию? Будет ли нормальный слайдер jQuery UI, использующий время Unix в качестве моих значений, иметь смысл?

 Christian Varga06 мая 2012 г., 02:50
 Matt Ball06 мая 2012 г., 15:19
@RobertKoritnik Хорошо, вот еще один, гораздо более конкретный мета-вопрос, чтобы поддержать меня:meta.stackexchange.com/questions/129153/…
 Matt Ball06 мая 2012 г., 01:37
Добро пожаловать в переполнение стека! К сожалению для продолжительности жизни этого вопроса,Stack Overflow is not a Recommendation Engine.
 Robert Koritnik06 мая 2012 г., 10:52
@ MattBall: он не просит рекомендаций.He's looking for a solution. Он спрашивает, видел ли кто-либо подобный элемент управления, в котором он нуждается, поэтому ему не нужно писать его самому. Здесь нет рекомендаций, есть?No.
 Robert Koritnik06 мая 2012 г., 10:56
Как долго вы ожидаете, что ваш слайдер диапазона будет? Потому что, если вы установите гранулярность до минутного уровня, а ваш диапазон достаточно длинный, скорее всего, вы не сможете выбрать все возможные значения. Но иметь три ползунка (первый для установки даты, второй и третий для установки времени этих двух дат) можно было бы сделать правильно. Все, что вам нужно сделать, - это подумать о удобстве использования такого элемента управления и о том, как сделать его интуитивно понятным. Потому что сначала вам нужно перетащить селектор даты, который откроет селектор времени после выпуска дескриптора.

Ответы на вопрос(2)

а потом решил создать): 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>

ЯШ:

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;
}

Вам нужно рассматривать дату-время как метку времени и просто использовать стандартный ползунок для целого числа, пересчитывая дату-время для ввода (или чего-то еще) на событие перемещения ползунка на лету.

 16 февр. 2016 г., 08:14
Привет, Пол, я вижу, что формат даты, который я использовал, выглядит не поддерживаемым Firefox. Просто измените даты на var dt_from = & quot; 2014/11/01 00: 34: 44 & quot ;; var dt_to = "2014/11/24 16: 37: 43"; (косые черты вместо черточек) и в Firefox это тоже хорошо
 mhkeller23 янв. 2015 г., 22:13
Выглядит аккуратно Я получаю сообщение об ошибке на том jsFiddle, которое говоритclosestHandle is undefined Тхо.
 28 янв. 2015 г., 13:39
Я только что перепроверил скриптовую ссылку - она отлично работает в моем Chrome 40.0.2214.93. С каким браузером у вас проблемы?
 03 февр. 2016 г., 09:48
Хорошая работа ... но это не работает в Mozilla. Может кто-нибудь помочь с этим. ClosestHandle - неопределенная ошибка, показывающая.
Решение Вопроса

если кто-то найдет эту ветку, я смог сделать это, преобразовав свои метки времени в unix time, а затем разбив свои данные по месяцам. Ползунок текущего месяца расширяется до полной ширины экрана, так что вы можете выбирать как можно больше с помощью очистки. Клавиши со стрелками завершают все остальное.

 04 янв. 2013 г., 06:09
Мне нужно прокрутить клавиши со стрелками в обоих направлениях в слайдере Jquery UI. Спасибо
 mhkeller04 сент. 2013 г., 05:58
Эта функциональность уже встроена в jQuery UIjqueryui.com/slider, Дескриптор должен быть в фокусе, поэтому, возможно, установите фокус с помощью JS с помощью .focus ()stackoverflow.com/questions/3383429/… Если вам нужна дополнительная помощь, возможно, спросите об этом в отдельной теме.

Ваш ответ на вопрос