CODEWITHSUNDEEP
twitter-bootstrapdatetimepicker
j.j.a.c.k.
j.j.a.c.k.

Reputation: 465

Bootstrap datetimepicker not showing control icons

Developing MVC application and in Razor i imported those scripts:

<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/_bootstrap-datetimepicker.less")">
<script src="@Url.Content("~/Scripts/jquery-3.3.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="@Url.Content("~/Scripts/popper.min.js")"></script>
<script src="@Url.Content("~/Scripts/moment-with-locales.min.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap-datetimepicker.min.js")"></script>

i set datetimepicker like this:

$('#datetimepicker').datetimepicker({
    locale: 'cs',
    format: 'DD.MM.YYYY',
    dayViewHeaderFormat: 'MMMM YYYY',
    minDate: today,
    stepping: 1,
    showTodayButton: true,
    allowInputToggle: true
});
$('.timepicker').datetimepicker({
    locale: 'cs',
    format: 'HH:mm',
    dayViewHeaderFormat: 'MMMM YYYY',
    stepping: 5,
    allowInputToggle: true
});

and my datetimepicker nor timepicker are showing arrowbuttons for control as you can see on picture:

enter image description here

Both has those controlling elements on its place but without icons and i can not find out why.

Upvotes: 7

Views: 17592

Answers (4)

romal tandel
romal tandel

Reputation: 501

In bootstrap 4 with Font-Awesome icons just add option in initialization like following.

$('#start_date').datetimepicker({
    fontAwesome: true
});

or with simple line icons

$('#start_date').datetimepicker({
    bootcssVer: 4
});

Upvotes: -1

sushil suthar
sushil suthar

Reputation: 679

Bootstrap doesn't support glyphicons. You need to give a separate icon library to it.

<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

$('.datepicker').datetimepicker({
    format: 'DD/MM/YYYY HH:mm', 
    useCurrent: false,
    showTodayButton: true,
    showClear: true,
    toolbarPlacement: 'bottom',
    sideBySide: true,
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
        previous: "fa fa-chevron-left",
        next: "fa fa-chevron-right",
        today: "fa fa-clock-o",
        clear: "fa fa-trash-o"
    }
});

Upvotes: 15

Manohar Khadka
Manohar Khadka

Reputation: 2195

In bootstrap 4 I replaced those icons with font icons to make it work:

 $(".timepicker").datetimepicker({
        icons:
            {
                up: 'fa fa-angle-up',
                down: 'fa fa-angle-down'
            },
        format: 'LT'
    });

Upvotes: 3

j.j.a.c.k.
j.j.a.c.k.

Reputation: 465

So the problem is in MVC bootstrap import through Nuget packages. There is problem with loading bootstrap glyphicons file..

So you need to import it from bootstrapcdn like this:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

or just download and load it from your project.

Upvotes: 4

Related Questions