2

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

nethken
  • 1,072
  • 7
  • 24
  • 40

5 Answers5

2

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

karthikr
  • 97,368
  • 26
  • 197
  • 188
  • 1
    You don't necessarily need to call the function on the input. According to the docs and given examples, you call the function on the input if you are not using any icons, that way clicking the input will trigger the calendar. https://jsfiddle.net/Eonasdan/0Ltv25o8/ – Ricky Ruiz Jul 10 '16 at 05:07
  • @Ricardo Yes haha. Sir do u know how to format the datetime with this "March 9,1997" like this format? – nethken Jul 10 '16 at 05:21
  • 1
    Datepicker takes an optional parameter - `dateFormat`: http://api.jqueryui.com/datepicker/#option-dateFormat. You can change it based on your requirement. – karthikr Jul 10 '16 at 05:23
  • Yeah, just do this: $('#datetimepicker1').datetimepicker({format: "MMMM D,YYYY",}); – Ricky Ruiz Jul 10 '16 at 05:31
1

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

Community
  • 1
  • 1
g singh
  • 21
  • 6
0

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

Leonid Zakharov
  • 940
  • 1
  • 6
  • 11
0

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.

Jami Park
  • 1
  • 1
0

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?

Nick_O
  • 429
  • 5
  • 18