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

Improve this question
0

5 Answers 5

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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. jsfiddle.net/Eonasdan/0Ltv25o8
@Ricardo Yes haha. Sir do u know how to format the datetime with this "March 9,1997" like this format?
Datepicker takes an optional parameter - dateFormat: api.jqueryui.com/datepicker/#option-dateFormat. You can change it based on your requirement.
Yeah, just do this: $('#datetimepicker1').datetimepicker({format: "MMMM D,YYYY",});
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

Improve this answer

Comments

0

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

Improve this answer

Comments

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.

Improve this answer

Comments

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?

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.