2014-02-07 48 views
1

我想爲我的Asp.Net MVC 5項目使用this datetimepicker。該項目使用默認的Bootstrap3佈局。這個datetimepicker的github項目可以找到hereEonasdan DateTimePicker引導程序3不工作

正如上面提到的網站,我在我看來包含了js和css文件。

我的DateTimePicker我已經從網站

@{ 
    ViewBag.Title = "CreateAppointment_SetDate"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
    @Scripts.Render("~/Scripts/jquery.min.js") 
    @Scripts.Render("~/Scripts/moment.min.js") 
    @Scripts.Render("~/Scripts/Bootstrap/transition.js") 
    @Scripts.Render("~/Scripts/Bootstrap/collapse.js") 
    @Scripts.Render("~/Scripts/bootstrap.min.js") 
    @Scripts.Render("~/Scripts/bootstrap-datetimepicker.min.js") 
    <link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css"/> 

} 

    <div class="col-md-10"> 
     <div class='well'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker1'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker1').datetimepicker(); 
      }); 
     </script> 
    </div> 

複製確切的代碼,這就是我的觀點 enter image description here

看到的問題是,當我點擊壓延圖標,沒有任何反應。沒有datetimepicker,並且日曆圖標不可點擊。它在控制檯中說Bootstrap requires jQuery但在網絡中我可以看到jquery被加載。

任何人都可以提出什麼問題是?

EDIT1:

@{ 
    ViewBag.Title = "CreateAppointment_SetDate"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
    @Scripts.Render("~/Scripts/jquery-2.1.0.min.js") 
    <script src="~/Scripts/jquery.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/moment.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script> 
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
} 



    @Html.HiddenFor(m=>m.AppointmentId) 
    <h3>When should appointment take place?</h3> 
    <h4>Please select the date range for the appointment to take place between</h4> 
    <h6>Please select a start date</h6> 

    <div class="col-md-10"> 
     <div class='well'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker2'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker2').datetimepicker(); 
      }); 
     </script> 
    </div> 

enter image description here enter image description here

EDIT2

的jquery.min.js是我從網站上得到的文件,我看了網站的網絡複製jquery.min.js文件鏈接並添加到我的項目中。當我評論@Scripts.Render("~/Scripts/jquery-2.1.0.min.js")行:

@{ 
    ViewBag.Title = "CreateAppointment_SetDate"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
    @*@Scripts.Render("~/Scripts/jquery-2.1.0.min.js")*@ 
    <script src="~/Scripts/jquery.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/moment.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script> 
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/> 
} 



    @Html.HiddenFor(m=>m.AppointmentId) 
    <h3>When should appointment take place?</h3> 
    <h4>Please select the date range for the appointment to take place between</h4> 
    <h6>Please select a start date</h6> 
    <div class ="container"> 
     <div class="col-md-10"> 
      <div class='well'> 
       <div class="form-group"> 
        <div class='input-group date' id='datetimepicker2'> 
         <input type='text' class="form-control" /> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
       </div> 
      </div> 
      <script type="text/javascript"> 
       $(function() { 
        $('#datetimepicker2').datetimepicker(); 
       }); 
      </script> 
     </div> 
    </div> 

在控制檯: enter image description here

編輯2註釋@*<script src="~/Scripts/jquery.min.js" type="text/javascript"></script>*@enter image description here

+0

我可以看到你正在使用兩個不同的jQuery版本:選擇一個,然後重試。 – MarcoL

+0

你可以看看編輯1可能是 – Cybercop

+0

不要加載jQuery兩次;什麼是語法錯誤?你有一個活的網站或其他腳本加載? –

回答

0

您正在使用2個jQuery的版本。我不知道jquery.min.js是哪個版本?

嘗試刪除此行@Scripts.Render("~/Scripts/jquery-2.1.0.min.js")

+0

我刪除了,仍然無法正常工作。我從datetimepicker所在的同一個github項目中獲得了jquery.min.js。 S – Cybercop

0

我不知道,但如何引導-datetimepicker.min.js不得不從css文件中的所有HTML代碼。然後我從git項目中複製了js代碼,現在看起來工作正常。 在另一方面,這是它的外觀例如 enter image description here

中,這是它的外觀我 enter image description here

此外,當我將鼠標懸停在日期我沒有得到手形圖標,我得到柯森圖標

+0

它看起來像css沒有加載。你還有問題嗎?你可能也想看看v4。 – Eonasdan