无法使 Bootstrap DateTimePicker 工作
Can't get Bootstrap DateTimePicker to work
我正在尝试让 bootstrap datetimepicker v3 根据说明工作 here , via nuget package but I can't make it to work. My scripts are like this scripts folder
我正在为我的项目制作一个医院网站，并试图让患者选择一个日期以便与医生预约。我正在尝试让日期时间选择器正常工作，但只显示一个空文本框
主页
<%@ 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>© <%: 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>
初始化日期选择器如下：
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
我通过添加
让它工作
<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页面。这似乎对带有母版页的网络表单有一些问题，因为我让它在非母版页网络表单中工作。
我正在尝试让 bootstrap datetimepicker v3 根据说明工作 here , via nuget package but I can't make it to work. My scripts are like this scripts folder
我正在为我的项目制作一个医院网站，并试图让患者选择一个日期以便与医生预约。我正在尝试让日期时间选择器正常工作，但只显示一个空文本框
主页
<%@ 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>© <%: 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>
初始化日期选择器如下：
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
我通过添加
让它工作<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页面。这似乎对带有母版页的网络表单有一些问题，因为我让它在非母版页网络表单中工作。