We Keep Coding

Calendar icon on datetime bootstrap picker notshowing

I have this datetime picker but only calendar icon wont show, other icons are showing correctly.
<link href='https://apollo.telekomcg.com/fonts/fonts.css' rel='stylesheet' type='text/css'/>
<script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/moment.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-combobox.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-switch.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-select.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-filestyle.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-filestyle.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-dialog.js"></script>
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<script src="Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="Scripts/EArchiveNew.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-multiselect.js"></script>
<script src="Scripts/jquery.js"></script>
<script src="Scripts/colResizable-1.5.min.js"></script>
<%--<link href="Css/VarPL.css" rel="stylesheet" type="text/css" />--%>
<link href="Css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="Css/bootstrap-switch.css" rel="stylesheet" />
<link href="Css/bootstrap-combobox.css" rel="stylesheet" />
<link href="Css/bootstrap-select.css" rel="stylesheet" />
<link href="Css/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="Css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<link href="Css/bootstrap-datepicker3.standalone.css" rel="stylesheet" />
<link href="Css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet" />
<link href="Css/bootstrap-dialog.css" rel="stylesheet" />
<link href="Css/bootstrap-multiselect.css" rel="stylesheet" />
<link href="Css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="Css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
Here are my scripts. I am using asp.net web forms.
This is my calendar
<div class='input-group date' style="width: 250px !important" data-date-format="YYYY-MM-DD">
<input type='text' id='untilDate' class="form-control" runat="server" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
It wont show and i cant figure out why.

you don't need that many imports, here is an example using your HTML an the essentials of bootstrap 5
EDIT:
your HTMl was just missing the part that displays the icon:
<span class="input-group-text bg-light d-block">
<i class="fa fa-calendar"></i>
</span>
$(function(){
$('#datepicker').datepicker();
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="input-group date" id="datepicker" style="width: 250px !important" data-date-format="yyyy-MM-DD">
<input type='text' id='untilDate' class="form-control" runat="server" />
<span class="input-group-append">
<span class="input-group-text bg-light d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
I hope this helps

If you are using Bootstrap 3 your code should work as expected:
$(function() {
$('#untilDate').datepicker();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="input-group date" data-provide="datepicker">
<input id="untilDate" type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
Therefore I guess you are using Bootstrap 4 or later. If yes, please note the following changes:
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Octicons
Font Awesome
See the Extend page for a list of alternatives. Have additional suggestions? Please open an issue or PR.
So, in this case you need to clearly use Font Awesome or another icon set as suggested by #PatricHume:
$(function() {
$('#untilDate').datepicker();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="input-group date" data-provide="datepicker">
<input id="untilDate" type="text" class="form-control">
<span class="input-group-append">
<span class="input-group-text d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>

I just wanted to say that I managed to fix this. The fix that I have done is probably stupid and I don't know why this works. In bootsrap.css and bootstrap.min.js I commented glyphicon-calendar:before{} and it showed on my calendar. If someone can explain it would be good.

don`t work css and js files in asp.net core 3.1

I am writing a project here I have created layout page and i have located root css files however I cant see "Css" design at my dashboard page I shared layout.cshtml with you Even I located app.StaticFiles just still don work in your opinion whats the problem
I need to finish this project as soon as possible, please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7693313d56.js"></script>
<link href="~/css/grid.css" rel="stylesheet" />
<link href="~/css/lightpick.css" rel="stylesheet" />
<link href="~/css/merchatdashboard.css" rel="stylesheet" />
<link href="~/css/mydatetime.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/css/style.css" rel="stylesheet" />
<link href="~/css/swipe.css" rel="stylesheet" />
</head>
<body>
<div class="leftmenuswipe">
<div class="leftsidemenuswipe">
#foreach (var item in ViewBag.Menus)
{
<div class="menuitemswipe document">
<div class="icon ">
<img src="#item.MENU_ICON">
</div>
<div class="link ">
#item.MENUNAME_1
</div>
#foreach (var sub in ViewBag.SubMenus)
{
if (item.ID == sub.MENU_PARENT_ID)
{
<ul class="document">
<li>
<a href="">
#sub.MENUNAME_1
</a>
</li>
</ul>
}
}
<div class="clear "></div>
</div>
}
</div>
</div>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<script src="https://kit.fontawesome.com/7693313d56.js"></script>
<script src="~/js/bar.js"></script>
<script src="~/js/bar_chart.js"></script>
<script src="~/js/chart.js"></script>
<script src="~/js/countdown.js"></script>
<script src="~/js/dashboard.js"></script>
<script src="~/js/dashboardjquery.js"></script>
<script src="~/js/demo.js"></script>
<script src="~/js/lightpick.js"></script>
<script src="~/js/Loginajax.js"></script>
<script src="~/js/piechart.js"></script>
<script src="~/js/pie_chart.js"></script>
<script src="~/js/ReportAjax.js"></script>
<script src="~/js/reportform.js"></script>
<script src="~/js/site.js"></script>
<script src="~/js/swipe.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
I dragged the css and javascript files I placed in the layout, it is true in the addresses, I tried every way, it is not solved again
you can look at this pictures which my Project

Can you check the Startup.cs file and see Configure method if it is using staticfiles
If not add
app.UseStaticFiles();

ASP.NET Core MVC / RAZOR - Styles equivalent of #Section Scripts

MVC & Razor allow for scripts to be composed in a specific view. If using a _Layout, a programmer trigger this section to render from inside the _Layout.cshtml file by inserting #RenderSection("Scripts", required: false)
Example
Index.cshtml (view)
...
#section Scripts{
<script>
var input = document.getElementById("search-bar");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("search-btn").click();
}
});
var searchBtn = document.getElementById("search-btn");
searchBtn.addEventListener("click", function(event) {
alert("click");
});
</script>
}
_Layout.cshtml
...
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
#RenderSection("Scripts", required: false)
I am curious if it is possible to do the same sort of workflow for style sheets. This would enable styles to be composed into the appropriate view making the view a self contained script. This would also prevent the programmer from having to shove every possible css file in the layout and thus loading everything with every route regardless if it is used or not. If this is possible it is unclear to me.
Proposed Example
Index.cshtml
<div>...</div>
#section Scripts {
<script>
...
</script>
}
#section Styles {
<style>
...
</style>
}
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - SCP_Client</title>
<link rel="stylesheet" href="~/css/Solar/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/app.css" />
**#RenderSection("Styles", Required: false )**
</head>
<body>
<div class="container" id="header-container">
<div class="row">
...
</div>
</div>
<div class="container" id="body-container">
#RenderBody()
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
**#RenderSection("Scripts", required: false)**
</body>
</html>

Where to put the <head> tag in an ASP.NET solution?

I have an ASP.NET project whose page starts with:
<head runat="server">
<meta charset="utf-8">
<title>Online SMS Choose</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link id="Link1" rel="stylesheet" runat="server" media="screen" href="~/css/tableStyle.css" />
<link id="Link2" rel="stylesheet" runat="server" media="screen" href="~/css/LoadingStyle.css" />
<link id="Link3" rel="stylesheet" runat="server" media="screen" href="~/css/selectStyle.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
Then my manager told me that I have to merge that project with another one. She gave me the code of the other project. That code doesn't have a head tag in it, but it has this at the start of the page:
<%# Page Title="Service Categories" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="service._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
Where do I put the <head> tag in this new project?

The first code snippet you provided is standard HTML markup and the second is ASP.NET markup as I am sure you are aware.
You can combine both of them in the following manner:
<%# Page Title="Service Categories" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="service._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
<title>Online SMS Choose</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link id="Link1" rel="stylesheet" runat="server" media="screen" href="~/css/tableStyle.css" />
<link id="Link2" rel="stylesheet" runat="server" media="screen" href="~/css/LoadingStyle.css" />
<link id="Link3" rel="stylesheet" runat="server" media="screen" href="~/css/selectStyle.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#datepicker").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
........

You have already a head section in there:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
check your project for files, which put content into this PlaceHolder. If you want to define a <head> wrap it around this content placeholder. But then you need to check the contents of the other files and refactor it, so you do not define a head tag inside a head tag.
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
// ...
</div>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

You can place the <head runat="server"></head> above the content..

Wich file are you supposed to put in the other?
One is using a masterpagefile and the other isn't.

jQueryMobile Datebox won't take a default date value - tried everything

I am trying to open a jQueryMobile datebox in a dialog mode. I am trying to set the datebox to a default value but it just won't take it for some reason. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#PageData["Title"]</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" href="#Href("/Styles/theme/mysite.min.css")" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
</head>
<body>
<script type="text/javascript">
$('document').ready(function(){
//Setting start date value on pageload
$('#myqdate').value('2012-01-14');
$('#myqdate').datebox('refresh');
}
</script>
<form name="shiftform" id="shiftform" action="#Href("~/Account/QChanges.cshtml")" method="post">
<div data-role="fieldcontain">
<label for="myqdate">Date:</label>
<input name="myqdate" id="myqdate" type="date" value="" data-role="datebox" data-options='{"mode": "flipbox", "forceInheritTheme": true, "defaultDate":"2012-01-14"}'>
</div>
<input type="submit" value="Get Queue"/>
</form>
</body>
</html>
I would really appreciate help from experts.
Thanks

This should do it:
$('#myqdate').trigger('datebox', {'method':'set', 'value':'2012-01-14', 'date':new Date('2012-01-14')})

It seems that you should be using the "defaultValue" property instead of the "defaultDate" that is in the data-options of your posted code. No need for the script block.

try closing your function:
$('document').ready(function(){
//Setting start date value on pageload
$('#myqdate').value('2012-01-14');
$('#myqdate').datebox('refresh');
}
)};