jquery滑块在移动和开始值后不显示滑块_Jquery_Jquery Ui_Asp.net Mvc 4_Uislider

jquery滑块在移动和开始值后不显示滑块

jquery jquery-ui asp.net-mvc-4

jquery滑块在移动和开始值后不显示滑块,jquery,jquery-ui,asp.net-mvc-4,uislider,Jquery,Jquery Ui,Asp.net Mvc 4,Uislider,我正在尝试在我的mvc4应用程序中使用时间滑块。在字段中单击时将显示滑块窗口，但滑块停留在起点。如果我沿着滑块单击，文本框中的值会更改，但滑块手柄从一开始就不会移动。我正在用这个。我不明白为什么当我更改值或反映起始值时，控制柄不会移动我的时间编辑器模板如下所示： @model Nullable<TimeSpan> @{ TimeSpan? ts = null; if (Model != null) { ts = (System.TimeSp

我正在尝试在我的mvc4应用程序中使用时间滑块。在字段中单击时将显示滑块窗口，但滑块停留在起点。如果我沿着滑块单击，文本框中的值会更改，但滑块手柄从一开始就不会移动。我正在用这个。我不明白为什么当我更改值或反映起始值时，控制柄不会移动

我的时间编辑器模板如下所示：

@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"  })
}

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

我的页面包括以下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如下：

@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"  })
}

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

任何帮助都将不胜感激

此代码非常适合我：

<!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>

您是如何知道添加平滑css的？这就是我们所缺少的。我没有看到任何关于在页面上添加它的内容。在把它包括进去之后，它起作用了。哇，我不认为这是问题所在。当我处理JQuery UI时，我总是加入平滑CSS主题，所以它并不简单。这更多的是出于习惯。