2013-06-30 123 views
1

我目前正試圖將jQuery Timepicker插件嵌入到我的頁面,但不知何故它不會工作。我現在研究了好幾個小時,但沒有在這裏的錯誤修復,在博客上的stackoverflow沒有幫助。timepicker添加不工作

下面是代碼

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

這將是巨大的,如果有人能事先指出我的錯誤 感謝

+0

檢查您的控制檯,看看它是否有相同的ID控件。 – rach

+0

我得到兩個未捕獲typerrors: 遺漏的類型錯誤:無法設置屬性 'parseDateTime' 的未定義的jQuery-UI-timepicker-addon.js:1074 (匿名函數)的jQuery-UI-timepicker-addon.js:1074 (匿名(匿名函數)創建:557 c jquery-1.10.1.min.js :4 p.fireWith jquery-1.10.1.min.js:4 x.extend.ready jquery-1.10.1.min.js:4 q jquery-1.10.1.min.js:4 – Superbyte

+0

試着把你的JS src從這裏再試一次:http://jqueryui.com/datepicker/ – rach

回答

2

有同樣的問題。請嘗試在timepicker插件之前添加JqueryUI。

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