CODEWITHSUNDEEP
c#asp.net-mvctwitter-bootstrapdatetimepicker
Mendes
Mendes

Reputation: 18471

Bootstrap Date and Time Picker not showing icons in MVC Razor

I´m trying to setup a date and time picker, but the icons (Calendar and Time) does not shows up. Here is my code:

<link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<div id="datetimepicker1" class="input-append date">
    Date and Time Test
                    <input data-format="dd/MM/yyyy hh:mm:ss" type="text" />
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            language: 'pt-BR'
        });
    });
</script>

I´ve tried to change icon-time and icon-calendar to glyphicon-time and glyicon-calendar and no success.

Here is what I get:

enter image description here

Don´t know what to do.. I need help, please. Thanks.

Upvotes: 1

Views: 4690

Answers (1)

Tom Dunn
Tom Dunn

Reputation: 2455

The website for the tarruda bootstrap-datetimepicker.js that you are using says the plugin is not currently maintained. It does not appear to have been upgraded for Bootstrap 3.

I'd suggest one of these date/time picker plugins that are compatible with Bootstrap 3:

And if you really want to get the one you are using to work, you can try making manual changes to the JS and CSS. Follow the blog post "Datepicker for Bootstrap with Twitter Bootstrap 3.0" found at kenyontechnology. The post was written for the date-only plugin on which the date/time plugin you are using was forked, so I think the changes should mostly apply.

Upvotes: 1

Related Questions