Question 86608 in ASP.NET Question posted in
The official documentation can be found here.

Calendar icon on datetime bootstrap picker notshowing – Asp.net

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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/[email protected]/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

    Login or Signup to reply.
  3. 0

    If you are using Bootstrap 3 your code should work as expected:

    $(function() {
  $('#untilDate').datepicker();
});
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search