datetimepicker no es un jQuery función

Question

que trabajar con datetimepicker jquery ui, cuando el código de abajo html, datetimepicker no se muestra y cuando inspecciono con firebug console se muestra un error ``

$("#example1").datetimepicker is not a function 
[Break On This Error] $("#example1").datetimepicker(); 

y por debajo es el código

<link href="css/styles.css" rel="stylesheet" type="text/css"> 
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"> 

<style> 
    .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } 

    .ui-timepicker-div dl { text-align: left; } 
    .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; } 
    .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }   
    .ui-timepicker-div td { font-size: 90%; }   
    .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }     

</style> 


<script type="text/javascript" src="scripts/jquery.js"></script> 

<script type="text/javascript" src="scripts/jquery/ui/jquery.ui.datepicker.js"></script> 
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-timepicker-addon.js"></script> 
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-sliderAccess.js"></script> 

<script> 
    $(document).ready(function(){ 
     $("#example1").datetimepicker(); 
    }); 
</script> 

<script> 

</script> 

<input type="text" id="example1" class="hasDatePicker"> 

Answer 1

Tenga en cuenta, selector de fecha de la interfaz de usuario jQuery no se ha inicializado con datetimepicker(), parece que hay un plugin/addon aquí: http://trentrichardson.com/examples/timepicker/.

Sin embargo, con solo jquery-ui en realidad se inicializó como $("#example").datepicker(). Véase el sitio de demostración de jQuery aquí: http://jqueryui.com/demos/datepicker/

$(document).ready(function(){ 
     $("#example1").datepicker(); 
    }); 

Para utilizar el datetimepicker en el vínculo referido anteriormente, usted querrá estar seguro de que su trayectoria de secuencias de comandos es correcta para el plugin.

Answer 2

Tuve el mismo problema con la extensión bootstrap datetimepicker. Incluyendo moment.js before datetimepicker.js fue la solución.

Answer 3

Todo se trata del orden de los scripts. ¡Intenta reordenarlos, coloca jquery.datetimepicker.js para ser el último de todos los scripts!

Answer 4

Por alguna razón este enlace resolvió mi problema ... No sé por qué .. aunque

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 

Entonces esto:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 

NOTA: Estoy utilizando Bootstrap 3 y jquery 1.11.3

Answer 5

Place your scripts in this order: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>