CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
nethken
nethken

Reputation: 1082

Bootstrap datetimepicker is not working

Hello can my datetimepicker is not workin and i dont know the reason why. Can someone help me about this?

here is the links

<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

here is the code it's inside the form but i think dont need to put it here

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

here is my scripts

<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">

 $(function () {
                $('#datetimepicker1').datetimepicker();
            });
    </script>

here is the output enter image description here

my css folder enter image description here

my js folder enter image description here

Upvotes: 2

Views: 2128

Answers (5)

karthikr
karthikr

Reputation: 99680

First, for the datepicker to show up, you need to call the function on the input.

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

Also, please include the relevant css files for the glyphicons to show up

Upvotes: 2

Nick_O
Nick_O

Reputation: 472

Looks like you are missing 

data-provide="datepicker"

As per instructions @ https://bootstrap-datepicker.readthedocs.io/en/latest/

Is there a reason why you've used <span></span> instead of <div></div>

as example code is

<div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div>

Also any errors in the developers console?

Upvotes: 0

g singh
g singh

Reputation: 21

maybe try Bootstrap 3 unable to display glyphicon properly for the icon not displaying. For me it resolved by getting the font files again as stated in the answer by user Experience

Upvotes: 1

Jami Park
Jami Park

Reputation: 1

My guess would be that you ran\n the javascript before the HTML elements loaded on your site.

In this example, note that the script comes after the div that the javascript uses. 

<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>
        <!-- AFTER the datetimerpicker is loaded -->

        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

If it had come before, like this:

<script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
</script>



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

The javascript would run before the div would load, so it would find nothing with the id #datetimepicker1. Take the javascript out of the head, and paste it right after the datetimepicker.

Upvotes: 0

Leonid Zakharov
Leonid Zakharov

Reputation: 970

Input must have id='datetimepicker1', not div.

Upvotes: 0

Related Questions