问无法在mvc剃须刀5中添加jquery时间选择器

EN

    @model MLMS.Library.Models.SaveLibraryUnit

    @{
      Layout = null;
    var dropDownListHelper = new MLMS.Services.Common.DropDownListHelper();
}

<fieldset>
    <legend>Unit Information</legend>

    <div class="row input-gap">
        <div class="five columns">
            @Html.LabelFor(model => model.UNIT_NAME, new { @class = "" })
            @Html.TextBoxFor(model => model.UNIT_NAME, new { @class = "u-full-width" })
            @Html.ValidationMessageFor(model => model.UNIT_NAME)
        </div>
    </div>
    <div class="row input-gap">
        <div class="three columns">
            @Html.LabelFor(model => model.VEHICLEID, new { @class = "" })
            @Html.DropDownListFor(model => model.VEHICLEID, dropDownListHelper.GetUnassignedVehicle((Model == null ? 0 : Model.VEHICLEID ?? 0)), "select", new { @class = "u-full-width" })
            @Html.ValidationMessageFor(model => model.VEHICLEID)
        </div>
        <div class="two columns">
            @Html.LabelFor(model => model.DATE_DEPLOYED, new { @class = "" })
            @Html.TextBoxFor(model => model.DATE_DEPLOYED, "{0:MM/dd/yyyy}", new { @class = "u-full-width datepicker" })
            @Html.ValidationMessageFor(model => model.DATE_DEPLOYED)
        </div>
    </div>
    @if (Model != null && Model.UNITID != 0)
    {
        <div class="row">
            <div class="three columns">
                @Html.LabelFor(model => model.STATUS, new { @class = "" })
                @Html.DropDownListFor(model => model.STATUS, MLMS.Common.UtilityHelper.ActiveInactiveStatus(@Model.StatusEnum), new { @class = "u-full-width" })
                @Html.ValidationMessageFor(model => model.STATUS)
            </div>
        </div>
    }
</fieldset>

<fieldset>
    <legend>Unit Details</legend>
    <a href="javascript:;" id="add-spot" class="button button-primary">Add Spot</a>

    <div id="spot-details">
        <table class="table">
            <thead class="hide">
                <tr>
                    <th>SL</th>
                    <th>Spot Name </th>
                    <th>Schedule Day </th>
                    <th>Schedule Time From</th>
                    <th>Schedule Time To </th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                @if (Model != null && Model.Spots.Any())
                {
                    for (int i = 0; i < Model.Spots.Count(); i++)
                    {
                        <tr data-id="@i">
                            <td> @(i + 1) </td>
                            <td>
                                @Model.Spots[i].SpotName
                                @Html.HiddenFor(model => model.Spots[i].SpotId, new { @class = "unit-spot-id" })
                            </td>
                            <td>
                                @Html.DropDownListFor(model => model.Spots[i].Day,
                         MLMS.Common.UtilityHelper.EnumSelectListTextFieldSelected(MLMS.Common.UtilityHelper.ParseEnum<DayOfWeek>(String.IsNullOrEmpty(Model.Spots[i].Day) ? "Friday" : Model.Spots[i].Day)),
                                                       "select", new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.Spots[i].Day)

                            </td>
                            <td>

                                @Html.TextBoxFor(model => model.Spots[i].TimeFrom, new { @class = @"timepicker" })
                                @Html.ValidationMessageFor(model => model.Spots[i].TimeFrom)
                            </td>
                            <td class="timepicker">
                                @Html.TextBoxFor(model => model.Spots[i].TimeTo, new { @class = @"timepicker" })
                                @Html.ValidationMessageFor(model => model.Spots[i].TimeTo)
                            </td>
                            <td>
                                <a class="button small button-danger" title="Remove" href="#" onclick="RemoveSpot(this); return false;">
                                    <i class="fa fa-close"></i>
                                </a>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>

</fieldset>

<script type="text/javascript">

    $(function () {
        $('.timepicker').timepicker({
            timeFormat: 'h:mm p',
            interval: 60,
            minTime: '10',
            maxTime: '6:00pm',
            defaultTime: '11',
            startTime: '10:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });
    });


</script>