Ползунок диапазона ионов с форматом ЧЧ: мм От и До не работает

Я пытаюсь использовать Ion Range Slider в своем проекте для выбора рабочих часов. Пример: (08:00-19:00).

 $('#ion').ionRangeSlider({
    grid: false,
    type: 'double',
    min: moment("0000", "hhmm"),
    max: moment("2359", "hhmm"),
    from: moment("0800", "hhmm"),
    to: moment("1900", "hhmm"),
    force_edges: true,
    drag_interval: true,
    step: 3600000,
    min_interval: 3600000,
    prettify: function (num) {
        return moment(num).format('HH:mm');
    }
});

Когда я хочу установить рабочие часы по умолчанию, используя от и до, это не работает. Слайдер работает, но значения не меняются.

Что мне не хватает?


jquery asp.net-mvc momentjs ion-range-slider
person YSFKBDY    schedule 28.08.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Поскольку вы используете часы в миллисекундах, вам нужно изменить значение moment, которое вы используете, с объекта на его значение в миллисекундах:

min: moment("0000", "hhmm"),   // this is an object and not a number...
max: moment("2359", "hhmm"),
from: moment("0800", "hhmm"),
to: moment("1900", "hhmm"),

Измените на (подробности см. в документации):

min: moment("0000", "hhmm").valueOf(),
max: moment("2359", "hhmm").valueOf(),
from: moment("0800", "hhmm").valueOf(),
to: moment("1900", "hhmm").valueOf(),


$('#ion').ionRangeSlider({
    grid: false,
    type: 'double',
    min: moment("0000", "hhmm").valueOf(),
    max: moment("2359", "hhmm").valueOf(),
    from: moment("0800", "hhmm").valueOf(),
    to: moment("1900", "hhmm").valueOf(),
    force_edges: true,
    drag_interval: true,
    step: 3600000,
    min_interval: 3600000,
    prettify: function (num) {
        return moment(num).format('HH:mm');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/IonDen/ion.rangeSlider/master/css/ion.rangeSlider.css">
<link rel="stylesheet" href="https://rawgit.com/IonDen/ion.rangeSlider/master/css/ion.rangeSlider.skinModern.css">
<script src="https://rawgit.com/IonDen/ion.rangeSlider/master/js/ion.rangeSlider.min.js"></script>


<input type="text" id="ion" name="example_name" value="" />

person gaetanoM    schedule 28.08.2018
comment
Soo, это было то, что я пропустил! Я не заметил, что это был объект, а не значение. Это работает отлично. Благодарю вас! - person YSFKBDY; 29.08.2018