如何设置日期选择器 VS 2013

【问题标题】：How to set up Datepicker VS 2013如何设置日期选择器 VS 2013
【发布时间】：2014-09-15 21:37:48
【问题描述】：

谁能给我一些具体的步骤来让日期选择器在 VS 2013 中工作？从包管理器中，我安装了包“Bootstrap Datepicker”1.3.0。怎么办？我终其一生都找不到任何关于我需要做什么才能使这件事正常工作的文档。

安装包后，我将 bootstrap-datepicker.js 的引用拖到页面的头部：

<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'});
});

当我运行该页面时，我收到此错误：“错误：对象不支持属性或方法 'datepicker'”。当然，我在 google 上搜索了这个并找到了数十亿个帖子，但我无法弄清楚我应该在 VS 2013 中做什么。其中许多都在谈论各种事物的加载顺序，并且经常提到截然不同的 Visual Studio 版本等。

似乎 JQuery 或 JQueryUI 或其他任何东西都有某种日期选择器。我不在乎我使用的是 Bootstrap 还是 JQuery ，我只是不知道其中任何一个的过程是什么，或者如何确定它们是否相互冲突等等。这真的让谷歌搜索当我什至无法弄清楚人们指的是哪个日期选择器时，这很难。

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

更新： 好吧，VS 只是一个花哨的文本编辑器，我明白了，我并不完全不同意。我的问题是，当您使用它创建 Web 应用程序时，它会创建数十个文件，其中包含对散布在各处的事物的引用。当我被告知“请确保您的参考文献的顺序正确”时，这正是我无法弄清楚该怎么做的事情。

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

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，因为我遇到了很多问题，这些问题在这个版本中不太有效（没有一些调整），所以我希望有人解决了类似的问题。我只是不明白“包管理器”的意义是什么，如果您仍然必须通过并破解所有这些文件才能使事情正常运行 - 它不应该为您解决依赖关系吗？

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

【问题讨论】：

  • bootstrap-datepicker.readthedocs.org/en/release
  • 另外，FWIW，这是 Javascript。很确定 Visual Studio 与此没有太大关系。
  • 这是一个非常无用的文档，我在发布之前阅读了它。那里没有提供 VS 2013 的具体信息。显然我有某种脚本加载冲突，所以我需要了解我需要在 VS 中设置什么才能使其工作。
  • 没有VS2013。在你的网页中引用脚本，在你的Javascript中调用datepicker，获利。
  • 如果就这么简单，我就不会创建这篇文章了。显然，它不起作用。感谢您的建议。

标签： twitter-bootstrap datepicker visual-studio-2013


【解决方案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>

它立即失败，出现非常熟悉的“错误：对象不支持属性或方法'datepicker'”消息。当我比较这两个页面的浏览器源代码时，我注意到在基于母版页的页面中有两个对 jquery 的引用。因此，我在母版页中注释掉了以下行：

<asp:ScriptReference Name="jquery" />

现在它可以完美运行了。

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

【讨论】：

    【解决方案2】：

    我的回答是针对 Visual Studio 2013 和 Web 应用程序的

    1. 在“内容”文件夹中包含 bootstrap-datepicker.css

    1. 修改 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>
    1. 在 Scripts 文件夹中包含 bootstrap-datepicker.js

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

      /// &lt;reference path="bootstrap-datepicker.js" /&gt;

    或者它应该已经自动更新了......

    1. 在Site.Master---->里面包含下面这行

      <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>
    1. 现在使用页面上的日期选择器如下：
    &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" />

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

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-09-19
      • 2017-01-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-11-05
      • 2015-07-31
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode