How to set up Datepicker VS 2013

后端未结

关注

 2  1576

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

相关标签:

2条回答

粉色の甜心

2021-01-26 12:39

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

0 讨论(0)

不要未来只要你来

2021-01-26 12:47

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.

0 讨论(0)