I´m using a Bootstrap 3 date AND time picker linked here:
DateTime Picker for Bootstrap 3
I can´t make the picking window open. When you click on the textbox, n
Your layout can be cleaned up a bit, since MVC4 no longer requires @Url.Content()
for virtual paths. You probably also want to look into how the bundling system works. For certain, what you're trying to do will probably work better with sections:
_Layout.cshtml:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TestApp</title>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="~/favicon.ico" type="image/ico" />
<link href="~/Content/bootstrap.css" rel="stylesheet" media="screen" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
<link href="~/Content/CustomNavBar.css" rel="stylesheet" media="screen" />
@RenderSection("head", required: false)
</head>
<body>
@RenderBody()
<script src="~/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
Index.cshtml:
@section head
{
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" type="text" />
}
@section scripts
{
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
}
<div class="container">
<div class="col-md-10">
<div class='well'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Using sections lets the view engine inject things like <script>
or <link />
tags into the correct parts of the layout. Anything not in a section is injected wherever @RenderBody()
occurs in the layout.
If you want a more concrete example, go straight to the source: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
In this two scripts of your Index.cshtml.
<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
You didn't use @UrlContent(). Run your project, and look in the generated html source code, if the browser can find this js files. Or look any error in the Network tab of your browser developer tools.