How to set up Datepicker VS 2013

问题

Can anyone please give me some specific steps to get a date picker working in VS 2013? From the package manager, I installed the package "Bootstrap Datepicker" 1.3.0. Now what? I can't for the life of me find any documentation on what, exactly, I need to do to get this thing working.

After I installed the package, I dragged a reference to bootstrap-datepicker.js onto the head section of my page:

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

I'm not sure if that's what I'm supposed to do or not). VS 2013 has all these murky things going on with script bundling and whatnot and I have absolutely no clue how/if this process affects how I get a datepicker working.

For testing, I placed this control on my page:

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

And I placed this in my page:

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

When I run the page, I get this error: "Error: Object doesn't support property or method 'datepicker'". Of course, I've googled this and found billions of postings, but I can't figure out what I'm supposed to do in VS 2013. Many of these talk about the order various things are loaded and frequently refer to vastly different versions of Visual Studio, etc.

It seems like JQuery or JQueryUI or whatever ALSO has a datepicker of some sort. I don't care if I use the Bootstrap one or the JQuery one, I just don't know what the procedure is for either one, or how to figure out if they're conflicting with each other, etc. This REALLY makes googling hard when I can't even figure out WHICH datepicker people are referring to.

This is a Web Application project, I'm using Master Pages, EF 6.0, Dynamic Data, etc. I have JQuery 2.1.0 installed.

UPDATE: Ok, VS is just a fancy text editor, I get that, and I don't disagree entirely. My problem is that when you create a web application with it, it creates dozens of files with references to things sprinkled all over the place. When I'm told "Just make sure your references are in the correct order" that's the EXACT thing I'm having trouble figuring out how to do.

Here's some detail (I'll probably get chastised now for providing too much detail):

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

I'm not gonna lie - I have no idea what's going on here, this file was generated by VS. Is this where I should be placing a reference to bootstrap-datepicker.js (rather than in the head of an individual page)?

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>

Again, this is an auto-generated file created by VS. There are many references to scripts here - is this where I should be adding a reference to bootstrap-datepicker.js, and if so, what would be the exact syntax of the line?

Global.asax.cs

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

Nothing too interesting in this file, but this is where VS 2013 seems to differ from other versions - the way it does bundling seems to have changed or something.

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>

Yet another auto-generated VS file. Not sure if this is kosher or not.

Hopefully someone can spot something somewhere that somehow helps me zero in on the problem. I keep harping on VS2013, because I have run across many problems with things that don't quite work in this version (without some tweaking), so I'm hoping someone has resolved a similar problem. I just don't understand what the point of the 'package manager' is, if you still have to go through and hack all these files to make things work - shouldn't it resolve dependencies for you?

Thanks in advance for wading through all this content.

回答1:

I'm answering this question to help the next poor bugger who runs into this STUPID problem.

I created a new VS application, and a basic (non-master-page) web form. Thusly:

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

Not surprisingly, it worked perfectly.

I then created a simple page like this:

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

Based on this master page (again VS stuck all the ScriptManager junk in there, I didn't):

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

It failed immediately with the all-too-familiar "Error: Object doesn't support property or method 'datepicker'" message. When I compared the browser source for the two pages, I noticed that there were two references to jquery in the masterpage-based one. Therefore, I commented out the following line in the master page:

<asp:ScriptReference Name="jquery" />

Now it works perfectly.

I still have absolutely no idea what this all means or what I'm potentially breaking by removing this line, but that solved it.

回答2:

My answer is specific to Visual Studio 2013 & Web Application

Include the bootstrap-datepicker.css in "Content" Folder

Modify the Bundle.config to include this line :

The contents should look like following:

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

Include the bootstrap-datepicker.js in the Scripts folder

Modify the Scripts/_refernces.js to include the following:

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

Or it should have automatically got updated...

Include the following line in the Site.Master----> inside

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

The should look like this:

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

Now use the datepicker on the page as follows:

&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;

Also, please don't remove the line :

<asp:ScriptReference Name="jquery" />

Your bootstrap nav bar with drop down menu and many more effects will fail..

来源：https://stackoverflow.com/questions/24093115/how-to-set-up-datepicker-vs-2013

标签

twitter-bootstrap

datepicker

visual-studio-2013