0

我正在尝试让时间滑块在我的 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"  })
}

然后我包括这个 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"/>

任何帮助将非常感激。

4

1 回答 1

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

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

$("#test").timepicker({
    timeFormat: "hh:mm tt"
});
于 2013-08-21T17:10:50.590 回答