MVC4 Eonasdan Bootstrap 3 Date Time picker does not open select screen
I am using the Bootstrap 3 date and time picker link linked here:
DateTime Picker for Bootstrap 3
I cannot open the selection window. When you click on the text box, nothing happens and no messages are displayed in the Console (Chrome) browser. So, in truth, the control acts like a simple text block and not like a DateTime collector.
Here is my code:
_Layout file is included in all views:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>TestApp</title>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="~/favicon.ico" type="image/ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="screen">
<link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
<link href="@Url.Content("~/Content/CustomNavBar.css")" rel="stylesheet" media="screen">
</head>
<body>
<script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
<.... some other stuff here...>
Index.cshtml used on this page:
<link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></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>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
I appreciate any help to make this work ...
Thanks for any help ...
source to share
Your layout can be cleaned up a bit since MVC4 no longer requires @Url.Content()
virtual paths. You probably also want to see how the picking system works. For sure, what you are trying to do will probably work better with partitions:
_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 allows the view engine to insert things like tags <script>
or <link />
into the correct parts of the layout. Anything not in a section is entered wherever it @RenderBody()
appears in the layout.
If you need a more specific 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
source to share
In these 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 haven't used @UrlContent (). Run the project and look in the generated HTML source if the browser can find these js files. Or look for any error on the Network tab of your browser's developer tools.
source to share