jquery - Trying to use datetimepicker with bootstrap, not working. Uncaught TypeError: $(...).datetimepicker is not a function -
i looked @ answers other questions , tried various solutions nothing worked.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>call report generator</title> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- bootstrap --> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rhyon1irsvxv4nd0jutlngaslcjuc7uwjduw9svrlvryoopp2bwygmgjqixwl/sp" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="heading"> <h1 align="center">call report generator </h1> </div> <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#">home</a></li> </ul> <ul class="pull-right"> <li><a href="#">help</a></li> </ul> </div> </div> <div class="container-fluid"> <!-- if needed left , right padding in 'md' , 'lg' screen means use container class --> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <a href="#">start date</a> <div class="container"> <div class="row"> <div class='col-sm-4'> <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> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <a href="#">end date</a> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <a href="#">provider</a> </div> </div> </div> </body> <script type="text/javascript"> $(function() { $('#datetimepicker1').datetimepicker(); }); </script> </html>i tried @ other solution question stated earlier , tried different solutions nothing worked.
did check if included javascript file "datetimepicker" plugin?. please sure include "datetimepicker" file javascript tag before code trying use "datetimepicker" function.
Comments
Post a Comment