i am new to bootstrap, i am trying to implement bootstrap date picker, but somehow it is not happening. Can you please check which code of mine is going wrong. below is my .html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<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>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
i think you are missing the DateTimepicker scripts please include this scripts
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
and you can just go through the demo http://code.runnable.com/UmOlOZbXvZRqAABU/bootstrap-datepicker-example-text-input-with-specifying-date-format2
somehow i got the work around.. but still it has some issues with time, if anyone has a better solution please post it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<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>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
Change this:
$(function () {
$('#datetimepicker1').datetimepicker();
});
to this:
jQuery(function($) {
$('#datetimepicker1').datetimepicker();
});
Reason:
Many JavaScript libraries use $ as a function or variable name, just as jQuery does.
In order to avoid conflicts, you need to specify the library alias of $ which in jQuery's case, $ is just an alias for jQuery.
Related
I can't seem to set this jquery datetimepicker. I believe I am following the instructions correctly. However, only the input box displays. After inspecting I saw these errors in the log
This the plugin I am trying to use.
https://xdsoft.net/jqplugins/datetimepicker/
previous code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="/jquery.datetimepicker.min.css"/>
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
<script src="/jquery.js"></script>
<script src="/build/jquery.datetimepicker.full.min.js"></script>
</html>
So I found the original files hereenter link description here
and then changed my code to the following
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</html>
but now I have a new error. Any ideas on what I am missing?
Mind the order and dependencies of your scripts and use eventlisteners:
To make it simple:
Load CSS first (DateTimePicker), load JS second (jQuery, Datetimepicker), initialize an eventlistener using $().ready().
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<!-- Load CSS first -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
<!-- Load JS second -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Initialize JS, setup eventlistener(s) -->
<script type="text/javascript">
jQuery(document).ready($ => $('#datetimepicker').datetimepicker());
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
</head>
<body>
<input id="datetimepicker" type="text" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> either this or the previous one not both-->
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</body>
</html>
The code above will fix all your issues about where to put scripts and what to load (you where both loading the extended and minified version of the library)
See the following snippet:
jQuery('#datetimepicker').datetimepicker();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css" />
<input id="datetimepicker" type="text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> either this or the previous one not both-->
I use this plugin https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
I tried every options. enableTimePicker, targetTextSelector, etc. But its still not working. But my Datepicker is showing and working well. But I cant configure any options in my date picker. Any help would be greatly appreciated
Here is the code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Persian DateTime</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../Content/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../Content/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.css" />
<script src="../Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container" style="max-width: 400px;">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="fromDate1" placeholder="از تاریخ"/>
</div>
</div>
<script src="../Scripts/MdBootstrapPersianDateTimePicker/jalaali.js" type="text/javascript"></script>
<script src="../Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js" type="text/javascript"></script>
<script>
$('input').MdPersianDateTimePicker({
isGregorian: true,
enableTimePicker: true,
});
</script>
</body>
</html>
I am trying to use the bootstrap datetime picker. The input box with the glyphicon is displayed; however, no calendar appears when I click in the input and manually entering the date does not result in it being formatted. I have copied this from sample code and spent a lot of time ensuring I have the libraries required.
This is displayed:
The HTML and js is:
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="resources/jquery/jquery.js"></script>
<script src="resources/jquery/jquery.min.js"></script>
<script src="resources/jquery/jquery.validate.js"></script>
<script src="resources/jquery/jquery.validate.min.js"></script>
<script src="resources/jquery/additional-methods.js"></script>
<script src="resources/jquery/additional-methods.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="resources/jquery/moment-with-locales.js"></script>
<!-- Le styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet"/>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="resources/favicon.png">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<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>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-transition.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-alert.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-modal.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-dropdown.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-scrollspy.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tab.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-button.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-collapse.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-carousel.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-typeahead.js"></script>
<script src="js/groupSummary-ajax.js"></script>
</body>
I know it is frowned upon to have the script with the HTML and will separate when working.
Try to swap the order of loading datetimepicker and moment.js, so that moment.js is loaded first
<script src="resources/jquery/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
Edit
As your code examples has some local resources which we can not check, here is a simple working example with external resources only:
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<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>
</body>
</html>
You maybe want to try to adapt that. If it doesn't work inside your code, try to check for errors on the console. Another try would be to implement my code, comment out all of your initial includes and un-comment them step by step to find the source of evil.
Checked your code and it seems like you have not included the moment.js file first before jquery library and bootstrap js file. Also you have not included the moment.js file in your code. Please try as mentioned below
Ex :
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
Another thing I noticed is, you didn't provided an id to the input field. Try to provide an id to input field and use in jquery
Ex :
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" id="datetimepicker1" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Now in script
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
Its worked for me and hope it works for you.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>-->
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
My date picker works if I comment out the ajax.google line. I thought the date picker is part of the jquery UI. what am I doing wrong or missing?
I obviously can't tell what's in your local jQuery files, but Google's copy of 1.8.18 works just fine:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<div class="demo">
<input type="text" id="datepicker">
</div>
http://jsfiddle.net/eqd4x1rq/2/
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, nothing happens and no messages are shown on browser Console (Chrome). So, in truth, the control is working as a simple textbox, not as a DateTime picker.
Here is my code:
_Layout file 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 that 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...
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.