2014-02-07 91 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

相关问题