Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error With Bootstrap 3 Date/Time Picker

I am using the date/time picker from Eonasden that you can find here. Date Time Picker

I am using HTML from the example:

<div class="container">     <div class="col-md-10">         <div class='well'>             <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> 

It displays the icon fine, but not the calendar drop down. My head script is:

<link href="view/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="view/dist/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> <link href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.0.1-p7/css/bootstrap.min.css" rel="stylesheet" >  <script src="http://code.jquery.com/jquery.js"></script> <script src="view/dist/js/bootstrap.min.js"></script> <script src="view/dist/js/bootstrap-datetimepicker.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.0.1-p7/js/bootstrap.min.js"></script>  $(function() {    $( document ).ajaxStop( function() {     $('#datetimepicker1').datetimepicker();   });  }); 

I receive a console error of "Uncaught ReferenceError: moment is not defined" Does anyone have an idea on how to fix this? It seems to work fine on his sample page.

like image 704
user3167249 Avatar asked Jan 30 '14 14:01

user3167249


People also ask

Why bootstrap datepicker is not working?

Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document. ready functionality you could also move the script to the end of the body tag.

Why datepicker is not working in HTML?

Try using a more recent version of jQuery UI that is compatible with jQuery 1.9+. See Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools. Consider using jQuery 1.9. 1, but it appears to work fine with 1.9.

How do I change datepicker format from DD MM to YYYY?

var year = 2014; var month = 5; var day = 10; var realDate = new Date(year, month - 1, day); // months are 0-based! $('#MainContent_txtDataConsegna'). datepicker({ dateFormat: 'dd/mm/yyyy' }); // format to show $('#MainContent_txtDataConsegna'). datepicker('setDate', realDate);


1 Answers

According to the examples, you need to include this to..

http://momentjs.com/

It has to be after bootstrap.js, but before the datetimepickerjs like this..

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

It shows it on the GitHub readme..

"Datetimepicker requires moment.js."

like image 165
Zim Avatar answered Oct 06 '22 22:10

Zim