Question

我正在尝试在我的mvc4应用中使用时间滑块。单击该字段时将显示滑块窗口，但滑块停留在起始点。如果我沿滑块单击，文本框中的值会更改，但滑块手柄永远不会从开始移动。我正在使用此add-on。我无法弄清楚当我更改值或反映起始值时手柄不会移动的原因。

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

@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"/>

非常感谢任何帮助。

Answer 1

这段代码非常适合我：

<!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？它作为文本工作正常，并不添加此附加组件不需要的额外箭头。

如果您需要12小时的AM和PM间隔时间，可以将其更改为：

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

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

1 个答案: