无法使Bootstrap DateTimePicker工作

时间:2018-01-04 12:16:07

标签: c# asp.net twitter-bootstrap bootstrap-datetimepicker

我试图通过nuget包根据说明here制作bootstrap datetimepicker v3,但我无法使其工作。我的脚本就像这样scripts folder

我正在为我的项目建立一个医院网站,并试图让病人选择一个约会,以便从医生那里预约。我试图让datetimepicker工作但只有一个空文本框显示

母版页

     <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="CareAndCureFull.SiteMaster" %>

<!DOCTYPE html>

<html lang="tr">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Care and Cure Hospital</title>

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

    <webopt:BundleReference runat="server" Path="~/Content/css" />
  <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <script type="text/javascript" src="Scripts/jquery-3.0.0.min.js"></script>
  <script type="text/javascript" src="Scripts/moment.min.js"></script>
  <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
  <script type="text/javascript" src="Scripts/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="Content/bootstrap-datetimepicker.min.css" />


</head>
<body>

    <form runat="server">
        <asp:ScriptManager 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" />
            </Scripts>
        </asp:ScriptManager>

        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Care and Cure Hospital</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" id="patientLink" visible="false" 
                        href="~/Patient/PatientPage">Patient Control Panel</a></li>
                        <li><a runat="server" id="doctorLink" visible="false" 
                        href="~/Doctor/Doctor">Doctor Control Panel</a></li>
                        <li><a runat="server" id="laborantLink" visible="false" 
                        href="~/Laborant/Laborant">Laborant Control Panel</a></li>
                        <li><a runat="server" id="adminLink" visible="false" 
                        href="~/Admin/Admin">Admin Control Panel</a></li>
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Departments/Department">Our Departments</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>


                    <asp:LoginView ID ="LoginView1" runat="server">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Patient Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Login</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Welcome, <%: Context.User.Identity.Name  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Logout" LogoutPageUrl="~/" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>


                    <%--<ul class="nav navbar-nav navbar-right">
                  <li><a runat="server" href="~/Register">Patient Register</a></li>
                   <li><a runat="server" href="~/Login">Login</a></li>
                        </ul>--%>
                </div>
            </div>
        </nav>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - Care and Cure Hospital</p>
            </footer>
        </div>

    </form>
</body>
</html>

获取预约页面

    <%@ Page Title="Get Appointment" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="NewAppointment.aspx.cs" Inherits="CareAndCureFull.Patient.NewAppointment" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%: Title %></h2>
   <div class="container">


  <div class="row">
    <div class="col-sm-3">

      <h3>MENU <i class="glyphicon glyphicon-briefcase"></i></h3>
      <hr>

      <ul class="nav nav-stacked ">
       <li><a href="PatientPage.aspx"><i class="glyphicon glyphicon-home"></i> Main Page</a></li>
        <li><a href="ProfileDetails.aspx"><i class="glyphicon glyphicon-user"></i> My Profile</a></li>
        <li><a href="NewAppointment.aspx"><i class="glyphicon glyphicon-list-alt"></i> Get Appointment</a></li>
        <li><a href="PatientPage.aspx"><i class="glyphicon glyphicon-calendar"></i> My Appointments</a></li>
          <li><a href="PatientPage.aspx"><i class="glyphicon glyphicon-flash"></i> Test Results</a></li>
          <li><a href="PatientPage.aspx"><i class="glyphicon glyphicon-link"></i>Show Prescriptions</a></li>




      </ul>

      <hr>

    </div>

      <div class="col-sm-9">


       <h3>Main Page </h3>  

       <hr>

       <div class="row">

            <div class="col-md-7">

            <div class="container">
   <div class="row">
     <div class='col-sm-6'>
         <div class="input-group">
    <input type="text" id="datetimepicker" class="form-control" name="date">
    <label class="input-group-addon btn" for="date">
       <span class="fa fa-calendar open-datetimepicker"></span>
    </label>
</div>
       </div>
       <script type="text/javascript">
           $('.open-datetimepicker').click(function (event) {
               event.preventDefault();
               $('#datetimepicker').focus();
           });
</script>
    </div>

</div>  

       </div>
     </div>
    </div>

  </div>





    </div>
</asp:Content>

2 个答案:

答案 0 :(得分:0)

如下所示初始化日期选择器:

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker();
    });
</script>

答案 1 :(得分:0)

我通过添加

使其成功
<script type="text/javascript" src="/Scripts/jquery-3.0.0.min.js"></script>
      <script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
      <script type="text/javascript" src="/Scripts/moment.min.js"></script>
      <script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
      <link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
      <link href="/Content/bootstrap.min.css" rel="stylesheet" />

到NewAppointment.aspx页面。对于带有母版页的Web表单,这似乎有一些问题,因为我使它在非母版页面webform中工作。