Невозможно добавить jquery timepicker в mvc razor 5

Question

Я пытаюсь добавить timepicker в элементе управления текстовыми полями (свойства модели TimeFrom и Timeto) в представлении mvc5 razor, предоставляя ему класс селектора. Я использовал jquery timepicker и добавил ссылку для них.

1. //cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js
2. //cdnjs.cloudflare.com/ajax/libs/timepicker/1.3. 5/jquery.timepicker.min.css»

Но его не показывает ничего

Мой код приведен ниже:.

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

Answer 1

Используйте этот плагин, что л ooks better: https://weareoutman.github.io/clockpicker/