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.
Related
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();
I loaded my ASP.NET MVC project in the web server but unfortunately none of my CSS and JS references are loaded. Some of my references in my defaultlayout are as below:
<head>
<link href="/Scripts/css/bootstrap.min.css" rel="stylesheet">
<link href="/Scripts/css/style.css" rel="stylesheet">
<link href="/Scripts/css/responsive.css" rel="stylesheet">
<link href="/Scripts/css/menu.css" rel="stylesheet">
<link href="/Scripts/css/animate.min.css" rel="stylesheet">
<link href="/Scripts/css/icon_fonts/css/all_icons_min.css" rel="stylesheet">
<link href="/Scripts/css/skins/square/grey.css" rel="stylesheet">
<link href="/Scripts/css/custom.css" rel="stylesheet">
<script src="/Scripts/js/modernizr.js"></script>
<link href="/Content/css/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="/Scripts/Chosen/chosen.min.css" rel="stylesheet" />
<link href="/Scripts/css/mycss.css" rel="stylesheet" />
</head>
<body>
<main>
<div id="form_container">
<div class="row">
<div class="col-lg-12">
<div id="wizard_container">
<div id="top-wizard">
<div id="progressbar"></div>
</div>
#RenderBody()
</div>
</div>
</div>
</div>
</main>
<script src="/Content/js/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/Scripts/js/common_scripts_min.js"></script>
<script src="/Scripts/js/registration_wizard_func.js"></script>
<script src="/Scripts/js/velocity.min.js"></script>
<script src="/Scripts/js/main.js"></script>
<script src="/Scripts/js/functions.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Content/js/jquery.unobtrusive-ajax.min.js"></script>
#RenderSection("Scripts", false)
<script src="/Scripts/Chosen/chosen.jquery.min.js"></script>
</body>
How can I fix this problem. Any help will be appreciated!
Just add ~ to the beginning of source.
Example :
<script src="~/Scripts/js/common_scripts_min.js"></script>
I want some radio buttons styled the way JQuery does it. I've now got demo code working that shows that in a minimal HTML page, but I need to do that now in an ASP.NET C# page. The following code works fine, where REDACTED points to a local-network server:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
</body>
</html>
But the following shows me ordinary, non-JQuery-styled radio buttons. The date picker does work (showing that JQuery is running) and messages show up as a pop-up and in the console, showing that the function is running, but the buttons aren't being styled.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="travel_temp.aspx.cs" Inherits="_idx" %>
<!DOCTYPE html>
<html>
<head id="hgs_head" runat="server">
<meta charset="utf-8">
<title>JQuery Test</title>
<!-- The following links have been commented out. The internal links point to copies of JQueryUI files that exist and are freshly downloaded from the makers' site. -->
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<!-- Radio button styling -->
<script>
$(function () {
console.log("ready!");
alert("Hi!");
$("radio").buttonset();
});
</script>
</head>
<body id="hgs_body" runat="server">
<p>Date Picker using JQuery:</p>
<input type="text" name="date" id="date"><script>$("#date").datepicker();</script>
<!-- MAIN CONTENT -->
<div id="main">
<p>Radio Buttons using JQuery:</p>
<form class="messages" id="messages" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"/>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Twilight</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Dash</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Rarity</label>
</div>
</form>
</div>
</body>
</html>
I figure the problem has to do with this page being ASP.NET with the buttons being created through an .aspx page (the .aspx.cs page is blanked out for demo purposes by the way). But the point of using "$(function" is that it only runs once the page is fully assembled, so the radio buttons should already be there.
What do I need to do, to make the styling work?
(Follow-up note: I didn't do it in this example, but the actual buttons are ASP.NET code. That wasn't the problem though; see answer. If you're having the same problem note that you apparently need to call the JQuery function to style them again if the page updates.)
During page load, you are assigning the buttonset property to element which is of type tag : radio. No such element exists in your DOM. You need to target the div where you want to apply the buttonset. In short, you are missing '#' in your selector.
$(function () {
console.log("ready!");
alert("Hi!");
$("#radio").buttonset();
});
I have placed a bootstrap navbar in a .net masterpage. This code runs perfectly when on another page without the masterpage, but if on the masterpage, it does not work.
<link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/pnotify/css/jquery.pnotify.default.icons.css" rel="stylesheet"
type="text/css" />
<script src="../plugins/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.15/jquery.form-validator.min.js"
type="text/javascript"></script>
<script src="../plugins/notify/notify.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">XX</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>FAQ</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Log Out</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Anyone? About to throw my computer out the window.
/Bob
if you check your browser inspection tool, I think you may be having this error:
Error("Bootstrap requires jQuery")
Bootstrap.js has a jQuery dependency. So you need to load the jQuery first script before bootstrap.js.
this should be the order. right above the </body> tab. The path should be relative to where you have placed your file.
NOTE: use /parent_folder/..path_to_your_files
<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
Hope this helps. :-)
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');
}
)};