使用滑块在Jquery Mobile中选择时间

Question

我需要用户选择一个时间,滑块似乎是最好的选择,但是,它只用于十进制值.这应该不是问题,因为我可以将它们作为"从0:00开始的分钟"进行处理,但我需要覆盖输入框和工具提示中显示给用户的内容.

有没有办法用自定义格式覆盖小数值,所以我将'分钟从0:00'转换为可读时间(如8:30)？

Answer 1

jQM滑块使用type ="number",并将输入连接到其代码.因此,解决这个问题的一种方法是隐藏输入,获取其值,转换为您想要的字符串,并将其写入您自己的输入位置.

DEMO

我已将滑块标记放在命名容器中,并向容器中添加了一个输出,该输入将显示时间:

<div id="theTime" class="time-slider">
    <label for="sliderTime">Time:</label>
    <input type="range" name="sliderTime" id="sliderTime" data-highlight="true" min="0" max="1444" value="60" />
    <input type="text" data-role="none" class="timeLabel ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input" value="1:00" disabled />
</div>

在CSS中,我隐藏了现有的输入,然后将新输入放在旧输入的位置:

.time-slider input[type=number] {
    display: none; 
}
.time-slider .timeLabel{
    position: relative;
    top: -38px;
}

然后在代码中,处理更改事件,将分钟转换为时间字符串并将字符串写入新的INPUT和滑块句柄的工具提示:

$(document).on("pagecreate", "#page1", function(){       
    $("#sliderTime").on("change", function(){
        var time = IntToTime($(this).val());
        $("#theTime .timeLabel").val(time);
        $("#theTime .ui-slider-handle").prop("title", time);
    });    
});

function IntToTime(val){
    var hours = parseInt( val / 60 );
    var min = val - (hours * 60);
    var time = hours + ':' + (min < 10 ? '0' + min : min);
    return time;
}

更新:有兴趣使用范围滑块来选择开始和结束时间.我创建了一个更新的小提琴解决方案:

RANGESLIDER FIDDLE