使用滑塊來選擇一個時間在Jquery Mobile

Question

我需要用戶選擇一個時間，滑塊似乎是最好的選擇，但它只是爲十進制值。這不應該是一個問題，因爲我可以將它們視爲'從0:00開始的分鐘數'，但我需要覆蓋在輸入框和工具提示中顯示給用戶的內容。

有沒有一種方法可以用自定義格式覆蓋十進制值，所以我將「從0:00開始的分鐘數」轉換爲可讀時間（如8:30）？

Answer 1

的JQM滑塊使用類型=「號」，也掛接輸入到它的代碼檢查下面的代碼。因此，解決這個問題的方法之一就是隱藏輸入，獲取其值，將其轉換爲您想要的字符串，並將其寫入您自己的輸入，放置在舊輸入的位置。

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

然後在代碼中，辦理變更事件，轉換分鐘時間字符串和寫入字符串到新的輸入和滑塊手柄的工具提示：

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

UPDATE：有在做一些興趣這與一個範圍滑塊爲了選擇一個開始和結束時間。我已經創建更新的撥弄的溶液：

RANGESLIDER FIDDLE

[JQuery用戶界面滑塊時間]（的

Answer 2

如果需要則單個滑塊基於JQuery UI Slider for time

$(function() { 
$("#slider-range").slider({  
    min: 0, 
    max: 1440, 
    step: 15, 
    slide: function(e, ui) { 
     var hours = Math.floor(ui.value/60); 
     var minutes = ui.value - (hours * 60); 

     if(hours.length == 1) hours = '0' + hours; 
     if(minutes.length == 1) minutes = '0' + minutes; 
     if(minutes==0)minutes = '00'; 
     $('#slider1Value').html(hours+':'+minutes); 
    } 
}); 
}); 

Fiddle Demo