CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatetimepicker
ATP
ATP

Reputation: 561

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: Files included

And my output is looking like below: Output on page

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/

Upvotes: 7

Views: 64477

Answers (5)

mrrrk
mrrrk

Reputation: 2301

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.

Upvotes: 1

Fab
Fab

Reputation: 14813

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 :)

Upvotes: 0

JaymesG
JaymesG

Reputation: 11

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.

Upvotes: 1

Swaps
Swaps

Reputation: 1548

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

Upvotes: 0

JGV
JGV

Reputation: 5187

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>

Upvotes: 15

Related Questions