javascript - timepicker 插件不工作

Question

我目前正在尝试将 jQuery Timepicker 插件嵌入到我的页面中，但不知何故它不起作用。我现在研究了几个小时，但无论是在 stackoverflow 上还是在博客上都没有帮助修复错误。

这是代码

@model MvcApplication1.ViewModels.CalendarViewModel
@{
    ViewBag.Title = "Calendar";
}

<h3 class="page-title">@ViewBag.Title</h3>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" />
<link href="@Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.3.css")" rel="stylesheet" />
<link href="@Url.Content("~/assets/plugins/jquery-timepicker-addon-master/jquery-ui-timepicker-addon.css")" rel="stylesheet" />
<ul class="breadcrumb">
    <li>
        <i class="icon-home"></i>
        <a href="Index">@ViewBag.Title</a>

        <i class="icon-angle-right"></i>
    </li>
    <li>
        <a href="#">Create new calendar entry</a>

</ul>
<script src="@Url.Content("~/assets/plugins/jquery-1.10.1.min.js")"></script>
<script src="@Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>
<script src="@Url.Content("~/assets/plugins/jquery-timepicker-addon-master/jquery-ui-timepicker-addon.js")"></script>
<script src="@Url.Content("~/assets/plugins/jquery-timepicker-addon-master/jquery-ui-sliderAccess.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


@using (Html.BeginForm())
{ @Html.ValidationSummary(true)
    <div class="form-horizontal form-view">

        <h3>@ViewBag.Title </h3>
        <h3 class="form-section">General</h3>
        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">Title:</label>
                    <div class="controls">
                        <span class="text">@Html.EditorFor(model => model.title)
                            @Html.ValidationMessageFor(model => model.title)
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">Start:</label>
                    <div class="controls">
                        @(new HtmlString(@Html.TextBoxFor(model => model.start, new { id = "datepicker_start" }).ToString()))
                        @Html.ValidationMessageFor(model => model.start)

                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">End:</label>
                    <div class="controls">

                        @(new HtmlString(@Html.TextBoxFor(model => model.end, new { id = "datepicker_end" }).ToString()))
                        @Html.ValidationMessageFor(model => model.end)

                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">Time Start:</label>
                    <div class="controls">
                        @(new HtmlString(@Html.TextBoxFor(model => model.time_start, new { id = "time_start" }).ToString()))
                        @Html.ValidationMessageFor(model => model.time_start)

                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">Time End:</label>
                    <div class="controls">
                        @(new HtmlString(@Html.TextBoxFor(model => model.time_end, new { id = "time_end" }).ToString()))
                        @Html.ValidationMessageFor(model => model.time_end)

                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 ">
                <div class="control-group">
                    <label class="control-label">Allday Event:</label>
                    <div class="controls">
                        @Html.DropDownListFor(model => model.allDay,
                                                      new SelectList(
                                                      new List<Object>{ 
                                                      new { value = "" , text = "Select"  },
                                                      new { value = "true" , text = "Yes" },
                                                      new { value = "false" , text = "No"}
                                                      }, "value", "text", "-"))
                        @Html.ValidationMessageFor(model => model.allDay)
                    </div>
                </div>
            </div>
        </div>

        <div class="form-actions">

            <a href="@Url.Content("~/Calendar/Index")" class="btn green">Back 
                <i class="m-icon-swapleft m-icon-white"></i>
            </a>
            <button type="submit" class="btn blue ">
                Create 
                <i class="icon-plus"></i>
            </button>


        </div>
    </div>
}


<script type="text/javascript">
    $(document).ready(function() {

        var date = new Date();

        $("#datepicker_start").datepicker({
            numberOfMonths: 1,
            minDate: date,
            onSelect: function (selected) {
                $("#datepicker_end").datepicker("option", "minDate", selected)
            }
        });

        $("#datepicker_end").datepicker({
            numberOfMonths: 1,
            onSelect: function (selected) {
                $("#datepicker_start").datepicker("option", "maxDate", selected)
            }
        });

        $("#time_start").timepicker();

        $("#time_end").timepicker();

    });
</script>

如果有人能指出我的错误就太好了提前致谢

Answer 1

遇到了同样的问题。请尝试在时间选择器插件之前添加 JqueryUI。

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>