jquery滑塊移動後不顯示滑塊和開始值

我想獲得一個時間滑塊在我的mvc4應用程序中工作。單擊字段時滑塊窗口將出現，但滑塊停留在起點處。如果沿滑塊單擊，文本框中的值會更改，但滑塊手柄從不會從一開始移動。我正在使用這個add-on。我不知道爲什麼當我改變數值或反映起始值時，手柄不會移動。jquery滑塊移動後不顯示滑塊和開始值

我有我的時間編輯器模板如下：

@model Nullable<TimeSpan> 

@{ 
    TimeSpan? ts = null; 
    if (Model != null) 
    { 
     ts = (System.TimeSpan)Model; 

    } 


    @Html.TextBox("", String.Format("{0:hh\\:mm}", ts), new { @class = "timefield", type = "time" }) 
}

然後我包括這個JavaScript文件。

$(function() { 
    $(".timefield").timepicker(); 
});

我的頁面包括以下JavaScript：

<script src="/Scripts/jquery-1.9.1.js"></script> 
<script src="/Scripts/jquery-migrate-1.1.1.js"></script> 

<script src="/Scripts/jquery-ui-1.10.3.js"></script> 

<script src="/Scripts/jquery-ui-timepicker-addon.js"></script> 
<script src="/Scripts/DatePickerReady.js"></script> 
<script src="/Scripts/TimePickerReady.js"></script> 


<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script src="/Scripts/jquery.validate.js"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

的HTML通過頁面上的編輯模板生成如下：

<input name="ArrivalSceneTime" class="timefield hasDatepicker" id="ArrivalSceneTime" type="time" value="15:30"/>

任何幫助將非常感激。

來源

2013-08-21 Xaxum

此代碼的工作完美的我：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script> 
    <style> 
     /* css for timepicker */ 
     .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } 
     .ui-timepicker-div dl { text-align: left; } 
     .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; } 
     .ui-timepicker-div dl dd { margin: 0 10px 10px 45%; } 
     .ui-timepicker-div td { font-size: 90%; } 
     .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } 

     .ui-timepicker-rtl{ direction: rtl; } 
     .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } 
     .ui-timepicker-rtl dl dt{ float: right; clear: right; } 
     .ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; } 
    </style> 
    <script> 
     $(document).ready(function() { 
      $("#test").timepicker(); 
     }); 
    </script> 
    </head> 
    <body> 
     <div> 
      <input id="test" name="test" type="text" value="15:30" /> 
     </div> 
    </body> 
</html>

而且，你爲什麼要把它type=time？它可以正常工作，並且不會添加這個附加組件所不需要的額外箭頭。

如果需要使用AM和PM 12周小時期間，你可以把它改成這樣：

$("#test").timepicker({ 
    timeFormat: "hh:mm tt" 
});

來源

2013-08-21 17:10:50 Tricky12

你怎麼知道添加平滑CSS？那是缺少的。我沒有看到有關將其添加到頁面上的任何信息。包括它後，它的作品。 – Xaxum

哇，我不認爲這是問題所在。當我處理JQuery UI時，我總是拋出CSS平滑主題，所以它不是簡單的。這是更多的習慣。 – Tricky12

jquery滑塊移動後不顯示滑塊和開始值

回答

相關問題