jquery - propiedades - Los estilos del gestor de datos de arranque no se han aplicado correctamente.
datetimepicker html (3)
Estoy teniendo un poco de problemas para hacer que este gestor de datos de arranque funcione:
http://eonasdan.github.io/bootstrap-datetimepicker/
Hice una página muy básica, aquí está el código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(''#datetimepicker1'').datetimepicker();
});
</script>
</head>
<body>
<div class=''col-sm-2''>
<div class=''input-group'' id=''datetimepicker1''>
<input type=''text'' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
</html>
Ahora, no es como si el complemento no funcionara, es más como si algunos estilos no se aplicaran correctamente. Aquí hay una foto para ilustrar mejor lo que quiero decir. A la izquierda es lo que tengo y a la derecha es lo que realmente quiero:
Como puede ver, todo está alineado a la izquierda en lugar de centrado y las cosas son más estrechas. Además, no tengo efecto de desplazamiento cuando paso el mouse sobre el calendario y el día actual no se describe correctamente. ¿Alguien puede decirme qué estoy haciendo mal?
A partir de su captura de pantalla, parece que no está accediendo a la biblioteca bootstrap-datetimepicker.css . Eche un vistazo a su consola y asegúrese de que no tenga ningún error y que la biblioteca exista en la carpeta que está buscando y que tenga todos los contenidos adecuados.
No se verá mal sin el css adicional porque bootstrap está haciendo la mayor parte del trabajo pesado y los complementos por lo general se aprovechan de las clases de Bootstrap y agregan un par de las suyas para empaquetarlo todo.
Con biblioteca - trabajando
$(function() {
$(''#datetimepicker1'').datetimepicker();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class=''col-xs-4''>
<div class=''input-group'' id=''datetimepicker1''>
<input type=''text'' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Sin biblioteca - roto
$(function() {
$(''#datetimepicker1'').datetimepicker();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class=''col-xs-4''>
<div class=''input-group'' id=''datetimepicker1''>
<input type=''text'' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
PD : es difícil de depurar ya que no tenemos forma de saber cómo se ven los archivos en su carpeta
/js/local. En el futuro, sugeriría usar CDN para las muestras en línea para que sea más fácil compartir lo que está viendo con los demás. Puedes capturar archivos estáticos distribuibles con cdnjs aquí:
Gracias Kyle, tenías razón, no estaba tirando de los estilos CSS. Aunque no es porque no lo incluyera ... fue un error en mi declaración de inclusión. Esto es lo que yo tenía:
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
Accidentalmente puse ''src'' en lugar de ''href'', así que esto es lo que debería haber puesto:
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
Gracias por señalarme en la dirección correcta :)
Tuve este mismo síntoma, debido al mismo problema de los estilos que no se cargan. En mi caso, mi aplicación es una aplicación de Rails 5, y en mi archivo application.css , tenía
*= require_bootstrap-datetimepicker
en lugar de
*= require bootstrap-datetimepicker
Hacer esa corrección me lo arregló.