Hey there, I'm currently working on a personal project as a beginner in Bootstrap. My main challenge for the past two days has been trying to integrate a dateTimePicker and number Incrementer using Bootstrap techniques. Despite my efforts in researching various tutorials and examples, none of them seem to work for me. I suspect that the issue lies in how I am referencing the jQuery libraries, JavaScript, and CSS files. This suspicion arose when I attempted to insert some glyphicons but they failed to appear. Can anyone advise me on the correct way to include and arrange these libraries?
This is what I have implemented so far:
1) In my Site.Master file in ASP.NET WebForms, I have included the following references in the head section:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</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" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
<link href="Content/datepicker.css" rel="stylesheet" />
<link href="Content/prettify.css" rel="stylesheet" />
<!--
<link href="Content/slider.css" rel="stylesheet" />
<link href="Content/iThing.css" rel="stylesheet" />
-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
<!--
<link href="https://a0.muscache.com/airbnb/static/packages/common_o2.1-024e8f08a0bba6da7891dd4b6c39b7aa.css" media="all" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/p1/main-pretzel-f7ebfdaf120892e36656cf39bcc3addf.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/packages/autocomplete-dd80b94ccaa2e37d6c20412621a9aeac.css" media="screen" rel="stylesheet" type="text/css" />
-->
<!--
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-slider.js"></script>
-->
2) Within my Default.aspx page, which serves as a WebForm with Master, I have the following code snippet for implementing the DateTimePicker:
<div class="col-md-3">
<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>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
3) The current outcome I'm experiencing is as follows:
The calendar icon does not show up.
In addition to the above code, at the end of Default.aspx, I have also added these script tags:
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-datepicker.js"></script>
If anyone can point out where I may be going wrong, your help would be greatly appreciated!