Calendar not showing up in Bootstrap datetimepicker

问题

I am implementing bootstrap datetimepicker with below code:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1">
                    <input type="text" class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

I have included below scripts and styles:

And my output is looking like below:

Order of including files is:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/Styles/PreLayout.css")

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/moment")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/JavaScripts/PreLayout.js")

When I click on calendar icon nothing happens. What mistake I am making in implementation?

EDIT:

Added fiddler: http://jsfiddle.net/1c1nr9sp/4/

回答1:

The cause of your issue is, you did not place the reference scripts in correct order.

See the documentation: http://eonasdan.github.io/bootstrap-datetimepicker/Installing/

$('#datetimepicker1').datetimepicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        
    </div>
</div>

回答2:

As far as the messed up spacing between the textbox and calendar icon, I was able to fix that by commenting out the line:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

My project handles this for me instead. ASP.net/MVC I also changed the col-sm-6 to col-sm-12.

回答3:

You might also want to check what icon-set are you using. There are multiple font icon sets like Font Awesome, Material Design, Bootstrap glyphicons, etc.

By default DateTimePicker uses Bootstrap glyphicons but you can specify your custom icons for all other things.

icons:{
            time: 'glyphicon glyphicon-time',
            date: 'glyphicon glyphicon-calendar',
            up: 'glyphicon glyphicon-chevron-up',
            down: 'glyphicon glyphicon-chevron-down',
            previous: 'glyphicon glyphicon-chevron-left',
            next: 'glyphicon glyphicon-chevron-right',
            today: 'glyphicon glyphicon-screenshot',
            clear: 'glyphicon glyphicon-trash',
            close: 'glyphicon glyphicon-remove'
        }

Ref- http://eonasdan.github.io/bootstrap-datetimepicker/Options/#icons

回答4:

Similar problem but different solution

It's specific to ASP.NET Core projects. In default visual studio template, all input tags are set with a max width of 280px like this:

file: site.css

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

Just remove that and the calendar icon fits in the right place :)

回答5:

I had problems using jQuery 3.x. (latest version of Bootstrap 3 supports jQuery 3). The dropdown would partially render but without the calendar. The time picker portion worked ok.

Downgrading to jQuery 2.x fixed the problem.

来源：https://stackoverflow.com/questions/31601942/calendar-not-showing-up-in-bootstrap-datetimepicker