我试图在MVC应用程序中使用下面的jQuery日期选择器。 http://bootstrap-datepicker.readthedocs.io/en/latest/markup.html
基础工作正在运行，它显示带有glyphicon的输入字段，当我在文本框中单击时，datepicker显示出来。我甚至可以选择一个日期，它将显示在文本框中。
我不想要的是设置默认日期和自动关闭等选项。那部分不适合我，我也没有看到我做错了什么。
我使用的是jquery-1.10.2.min.js，它是我在Visual Studio中创建MVC应用程序的初始设置。
我正在使用他捆绑来在项目中获取它。我已经将脚本的呈现从页脚移动到标题，然后将脚本直接在视图中使用datepicker。
有人建议我可以尝试让它起作用吗？我开始尝试让StartDate首先工作，然后我将继续使用EndDate。
Bundle.config
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/bootstrap-datepicker.min.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-datepicker3.min.css",
"~/Content/site.css"));
}
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title - Reporting</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</head>
<body>
<div 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>
@Html.ActionLink("Reports", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
<li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
@if (System.DateTime.Today.Year > 2016)
{
<p>© 2016 - @DateTime.Now.Year</p>
}
else
{
<p>© @DateTime.Now.Year</p>
}
</footer>
</div>
</body>
</html>
TotalHours.cshtml
@model Reports.ViewModels.TotalHoursReportVM
<script type="text/javascript">
$(document).ready(function () {
$('#StartDate').datepicker({
title: "Start Date",
autoClose: true,
setDate: new Date()
});
});
</script>
@{
ViewBag.Title = "TotalHours";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Total Hours Report</h2>
<div class="container">
@using (Html.BeginForm("TotalHoursRun", "Report", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary("Report creation was unsuccessful. Please correct the errors and try again.")
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="row voffset3">
<div class="col-md-2 text-left">
<div class="input-group date" data-provide="datepicker">
<input type="text" id="StartDate" name="StartDate" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="input-group date" data-provide="datepicker">
<input type="text" id="EndDate" name="EndDate" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<div class="form-group">
<div class="row voffset7">
<div class="cols-sm-12">
<button type="submit" class="btn btn-primary">Run Report</button>
</div>
</div>
</div>
</form>
}
</div>
-----更新-----
我发现以下示例似乎只适用于设置日期。我找到的样本称为＆＃34;更新＆＃34;做了一些设置后。到目前为止它似乎适用于日期，但＆＃34; autoclose＆＃34;和＆＃34;标题＆＃34;没有工作。这些并不重要，但我想知道是否有更好的方法来解决这个问题。
$(document).ready(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$(document).ready(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
$("#StartDate").datepicker("setDate", startDate);
$("#StartDate").datepicker("autoclose", true);
$("#StartDate").datepicker("title", "Start Date");
$("#StartDate").datepicker('update');
$("#EndDate").datepicker("setDate", endDate);
$("#EndDate").datepicker("autoclose", true);
$("#EndDate").datepicker("title", "End Date");
$("#EndDate").datepicker('update');
});
});