2011-04-16 31 views
8

¡Buen día!JQuery datepicker no funciona

Estoy tratando de usar jquery por primera vez. Y no puedo hacer que funcione. Mi código es el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 
<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
    </script> 
    <div class="demo"> 
    <p>Date: <input type="text" id="datepicker"></p> 
    </div><!-- End demo --> 
</body> 
</HTML> 

Pero el selector de fechas no funciona .. ¿Qué debo hacer para que funcione? Gracias.

+5

"No funciona" no es una descripción de error suficiente. *¿Qué no funciona? ¿Lo que pasa? –

+1

"no puedo hacer que funcione" es una descripción terrible del problema. ¿Qué no funciona? ¿Qué esperas que pase, no? ¿Qué errores aparecen en la consola de JavaScript? – Oded

+1

el marcador de fecha. – newbie

Respuesta

22

No ha incluido la biblioteca selector de fechas

por lo que añadir

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 

a su etiqueta <head>

live demo

+0

¿cómo puedo incluirlo? Gracias – newbie

+0

ah bien ... ahora está funcionando ... Gracias. :) – newbie

+0

@newbie - Asegúrese y haga clic en la marca de verificación de contorno junto a la respuesta que utilizó. Esto estaría justo debajo del conteo de votos para la respuesta. –

0

intente ajustar el orden en que se ejecuta su secuencia de comandos. Coloque la etiqueta del script debajo del elemento que está intentando afectar. O déjelo en la parte superior y envuélvalo en $(document).ready() EDIT: e incluya el archivo correcto.

6

Datepicker no es parte de jQuery. Tienes que obtener jQuery UI para usar el marcador de fecha.

5

El problema es que no está vinculando a la biblioteca jQuery UI (que es donde reside el datepicker):

http://jsfiddle.net/5AkyC/

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> 
<script> 
$(function() { 
    $("#datepicker").datepicker(); 
}); 
</script> 
</head> 
<body> 
    <div class="demo"> 
    <p>Date: <input type="text" id="datepicker"></p> 
    </div><!-- End demo --> 
</body> 
</HTML> 
+0

¡Olvidaste desactivar la normalización de CSS en tu demo! – Raynos

+0

@Raynos: no importa para una demostración, IMO. –

+0

@Raynos - Aunque me pregunto por qué la gente de jsfiddle hace eso por defecto. : \ –

2

Para mí .. El problema era que el ancla necesita un título, y que faltaba!

0

después de que todo el html que queremos escribir estas líneas de código

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all"> 



<script> 
$('#date').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 
    yearRange: "-100:+0", 
    dateFormat: 'dd/mm/yy' 

}); 
</script> 
1

me he quedado atrapado en un problema en el selector de fechas() parecía estar haciendo nada. Resultó que el problema era que la entrada estaba dentro de un div Bootstrap "input-group". Simplemente tomar la entrada del grupo de entrada resolvió el problema.

Cuestiones relacionadas