Question

有人可以给我一些具体步骤，让日期选择器在 VS 2013 中工作吗？从软件包管理器中，我安装了软件包＆＃34; Bootstrap Datepicker＆＃34; 1.3.0。怎么办？我不能为我的生活找到任何关于我需要做什么才能使这件事工作的文件。

安装软件包之后，我将对bootstrap-datepicker.js的引用拖到我页面的head部分：

<script src="../../../Scripts/bootstrap-datepicker.js"></script>

我不确定这是不是我应该做的事情。 VS 2013 所有这些模糊不清的事情都会发生在脚本捆绑和诸如此类的事情上，我完全不知道这个过程是如何影响我如何使得日期选择器工作的。

为了测试，我将此控件放在我的页面上：

<input id="workDate" type="text" value="06-01-2014" class="dp" />

我把它放在我的页面中：

$(function ()
{
  $('.dp').datepicker({format: 'mm-dd-yyyy'});
});

当我运行该页面时，我收到此错误：＆＃34;错误：对象不支持属性或方法＆＃39; datepicker＆＃39;＆＃34;。当然，我已经搜索了这个并发现了数十亿的帖子，但我无法弄清楚我在VS 2013中应该做什么。其中许多都谈到了各种各样的东西被加载的顺序，并经常引用不同版本的Visual Studio等。

似乎JQuery或JQueryUI或者其他任何类型的日期选择器。如果我使用Bootstrap或JQuery，我不在乎，我只是不知道任何一个程序是什么，或者如何判断它们是否相互冲突，当我甚至无法弄清楚人们所指的日期拣货者时，这真的会让谷歌搜索变得困难。

这是一个Web应用程序项目，我使用母版页，EF 6.0，动态数据等。我安装了JQuery 2.1.0。

更新好吧，VS只是一个花哨的文本编辑器，我明白了，我并不完全不同意。我的问题是，当你用它创建一个Web应用程序时，它会创建几十个文件，并引用遍布各处的东西。当我告诉＆＃34;请确保您的参考文献的顺序正确无误＃34;这是我无法弄清楚如何做的确切事情。

这里有一些细节（我现在可能因为提供太多细节而受到惩罚）：

BundleConfig.cs

public class BundleConfig
  {
    public static void RegisterBundles(BundleCollection bundles)
    {
      bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
        "~/Scripts/WebForms/WebForms.js",
        "~/Scripts/WebForms/WebUIValidation.js",
        "~/Scripts/WebForms/MenuStandards.js",
        "~/Scripts/WebForms/Focus.js",
        "~/Scripts/WebForms/GridView.js",
        "~/Scripts/WebForms/DetailsView.js",
        "~/Scripts/WebForms/TreeView.js",
        "~/Scripts/WebForms/WebParts.js"));

      bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
        "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
        "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
        "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
        "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        "~/Scripts/modernizr-*"));

      ScriptManager.ScriptResourceMapping.AddDefinition(
        "respond",
        new ScriptResourceDefinition
        {
          Path = "~/Scripts/respond.min.js",
          DebugPath = "~/Scripts/respond.js",
        });

      bundles.Add(new StyleBundle("~/StyleSheets").IncludeDirectory("~/Content", "*.css"));
    }
}

我不会撒谎 - 我不知道这里发生了什么，这个文件是由VS生成的。这是我应该引用bootstrap-datepicker.js（而不是单个页面的头部）吗？

Site.Master

<head runat="server">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%: Page.Title %> - Manpower</title>

  <asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
  </asp:PlaceHolder>

  <link href="../Content/bootstrap-theme.css" rel="stylesheet" />
  <link href="../Content/bootstrap.css" rel="stylesheet" />
  <link href="../Content/DD.css" rel="stylesheet" />
  <link href="../Content/Site.css" rel="stylesheet" />

  <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <asp:ContentPlaceHolder ID="cpHead" runat="server">
  </asp:ContentPlaceHolder>
</head>

<body>
  <form runat="server">
  <asp:ScriptManager runat="server">
    <Scripts>
      <%--Framework Scripts--%>
      <asp:ScriptReference Name="MsAjaxBundle" />
      <asp:ScriptReference Name="jquery" />
      <asp:ScriptReference Name="bootstrap" />
      <asp:ScriptReference Name="respond" />
      <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
      <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
      <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
      <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
      <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
      <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
      <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
      <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
      <asp:ScriptReference Name="WebFormsBundle" />
      <%--Site Scripts--%>
    </Scripts>
  </asp:ScriptManager>

同样，这是由VS创建的自动生成的文件。这里有许多脚本引用 - 这是我应该添加对bootstrap-datepicker.js的引用，如果是，那么该行的确切语法是什么？

Global.asax.cs

void Application_Start(object sender, EventArgs e)
{
  // Code that runs on application startup
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
}

在这个文件中没有什么太有意思，但这是VS 2013似乎与其他版本不同的地方 - 它捆绑的方式似乎已经改变或者其他什么。

Packages.config

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Antlr" version="3.5.0.2" targetFramework="net451" />
  <package id="AspNet.ScriptManager.bootstrap" version="3.1.1" targetFramework="net451" />
  <package id="AspNet.ScriptManager.jQuery" version="2.1.0" targetFramework="net451" />
  <package id="bootstrap" version="3.1.1" targetFramework="net451" />
  <package id="Bootstrap.Datepicker" version="1.3.0" targetFramework="net451" />
  <package id="DynamicDataTemplatesCS" version="1.0.1" targetFramework="net451" />
  <package id="EntityFramework" version="6.1.0" targetFramework="net451" />
  <package id="jQuery" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.DynamicData.EFProvider" version="6.0.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.EntityDataSource" version="6.0.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.FriendlyUrls" version="1.0.2" targetFramework="net451" />
  <package id="Microsoft.AspNet.FriendlyUrls.Core" version="1.0.2" targetFramework="net451" />
  <package id="Microsoft.AspNet.Identity.Core" version="2.0.1" targetFramework="net451" />
  <package id="Microsoft.AspNet.Identity.EntityFramework" version="2.0.1" targetFramework="net451" />
  <package id="Microsoft.AspNet.Identity.Owin" version="2.0.1" targetFramework="net451" />
  <package id="Microsoft.AspNet.Providers.Core" version="2.0.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.ScriptManager.MSAjax" version="5.0.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.ScriptManager.WebForms" version="5.0.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.Web.Optimization" version="1.1.3" targetFramework="net451" />
  <package id="Microsoft.AspNet.Web.Optimization.WebForms" version="1.1.3" targetFramework="net451" />
  <package id="Microsoft.Owin" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Owin.Host.SystemWeb" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Owin.Security" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.Cookies" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.Facebook" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.Google" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.MicrosoftAccount" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.OAuth" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.Twitter" version="2.1.0" targetFramework="net451" />
  <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net451" />
  <package id="Modernizr" version="2.7.2" targetFramework="net451" />
  <package id="Newtonsoft.Json" version="6.0.3" targetFramework="net451" />
  <package id="Owin" version="1.0" targetFramework="net451" />
  <package id="Respond" version="1.4.2" targetFramework="net451" />
  <package id="System.Linq.Dynamic" version="1.0.0" targetFramework="net451" />
  <package id="WebGrease" version="1.6.0" targetFramework="net451" />
</packages>

又一个自动生成的VS文件。不确定这是否是犹太洁食。

希望有人可以在某处找到某种方式来帮助我解决问题。我一直在VS2013上喋喋不休，因为我在这个版本中遇到了很多问题（没有一些调整），所以我希望有人解决了类似的问题。我只是不明白包裹经理的重点是什么？＆＃39;是的，如果你仍然需要通过并破解所有这些文件来使事情有效 - 不应该为你解决依赖关系吗？

提前感谢您浏览所有这些内容。

Answer 1

我回答这个问题是为了帮助下一个遇到这个STUPID问题的可怜的人。

我创建了一个新的VS应用程序和一个基本（非主页面）Web表单。正是如此：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestDatePicker.aspx.cs" Inherits="mptest.TestDatePicker" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <link href="Site.css" rel="stylesheet" />
  <script src="Scripts/jquery-1.7.1.js"></script>
  <script src="Scripts/bootstrap.js"></script>
  <link href="Content/bootstrap.css" rel="stylesheet" />
  <script src="Scripts/bootstrap-datepicker.js"></script>
  <link href="Content/bootstrap-datepicker.css" rel="stylesheet" />
</head>
<body>
  <form id="form1" runat="server">
    <div><input id="StartDate" class="datepicker" /></div>
  </form>
</body>

<script type="text/javascript">
  $('.datepicker').datepicker();
</script>

</html>

毫不奇怪，它运作得很好。

然后我创建了一个这样的简单页面：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="TestDatePickerMasterPage.aspx.cs" Inherits="mptest.TestDatePickerMasterPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <input id="StartDate" class="datepicker" />
</asp:Content>

基于这个母版页（再次VS将所有ScriptManager垃圾卡在那里，我没有）：

<%@ Master Language="C#" CodeBehind="Site.master.cs" Inherits="mptest.Site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Dynamic Data Site</title>
  <link href="~/Site.css" rel="stylesheet" type="text/css" />

  <script src="Scripts/jquery-1.7.1.js"></script>
  <script src="Scripts/bootstrap.js"></script>
  <link href="Content/bootstrap.css" rel="stylesheet" />
  <script src="Scripts/bootstrap-datepicker.js"></script>
  <link href="Content/bootstrap-datepicker.css" rel="stylesheet" />

  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:ScriptManager runat="server" EnablePartialRendering="false">
        <Scripts>
          <asp:ScriptReference Name="jquery" />
          <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" />
        </Scripts>
      </asp:ScriptManager>

      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </div>
  </form>
</body>

<script type="text/javascript">
  $('.datepicker').datepicker();
</script>

</html>

它立刻失败了，因为太熟悉＆＃34;错误：对象不支持属性或方法＆＃39; datepicker＆＃39;＆＃34;＆＃34;信息。当我比较两个页面的浏览器源代码时，我注意到在基于母版页的内容中有两个对jquery的引用。因此，我在母版页中注释掉了以下行：

<asp:ScriptReference Name="jquery" />

现在它完美无缺。

我仍然完全不知道这一切意味着什么，或者我通过删除这条线可能会打破什么，但这解决了它。

Answer 2

我的回答是针对Visual Studio 2013＆amp;网络应用程序

在“内容”文件夹

修改Bundle.config以包含以下行：

内容应如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
  <styleBundle path="~/Content/css">
    <include path="~/Content/bootstrap.css" />
    <include path="~/Content/Site.css" />
    <include path="~/Content/bootstrap-datepicker.css" />   
  </styleBundle>
</bundles>

在Scripts文件夹中包含bootstrap-datepicker.js

修改Scripts / _refernces.js以包含以下内容：

/// <reference path="bootstrap-datepicker.js" />

或者应该自动更新......

在Site.Master中包含以下行----＆gt;在里面

<asp:ScriptReference Path="~/Scripts/bootstrap-datepicker.js"></asp:ScriptReference>

应该是这样的：

<asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
            <Scripts>                   
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery"/>                
                <asp:ScriptReference Name="bootstrap" />                
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>  
                <asp:ScriptReference Path="~/Scripts/bootstrap-datepicker.js"></asp:ScriptReference>            
            </Scripts>
        </asp:ScriptManager>

现在使用页面上的日期选择器，如下所示：

&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$(".datepicker").datepicker();
});
&lt;/script&gt;
&lt;asp:TextBox ID="txtOrderDate" 
CssClass="form-control col-md-3 datepicker" runat="server" 
data-provide="datepicker"/&gt;

另外，请不要删除该行：

<asp:ScriptReference Name="jquery" />

带有下拉菜单和更多效果的bootstrap导航栏将失败..

如何设置Datepicker VS 2013

2 个答案: