Bienvenid@s hoy os mostraré las propiedades CSS principales para modificar los estilos CSS del datepicker de Jquery UI, esto brinda la posibilidad de cambiar el tamaño del campo de fecha, el tipo de letra, el color de fondo, el tamaño de letra, etc ... es decir podrás adecuar el datepicker a lo que necesites.
div principal del datepicker: .ui-datepicker
Tabla con los días del mes: .ui-datepicker table
La cabecera: .ui-datepicker .ui-datepicker-header
Para los días de la semana: Sa Mo ... : .ui-datepicker th
Para items con los días del mes por defecto: .ui-datepicker .ui-state-default
Para el item del día del mes seleccionado: .ui-datepicker .ui-state-active
Ejemplo:
Fecha:
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<style>
/*div principal del datepicker*/
.ui-datepicker
{
width: auto;
background: black;
}
/*Tabla con los días del mes*/
.ui-datepicker table
{
font-size: 9px;
}
/*La cabecera*/
.ui-datepicker .ui-datepicker-header
{
font-size: 12px;
background: #FFFFFF;
}
/*Para los días de la semana: Sa Mo ... */
.ui-datepicker th
{
color: #FFFFFF;
}
/*Para items con los días del mes por defecto */
.ui-datepicker .ui-state-default
{
background: #FFFFFF;
}
/*Para el item del día del mes seleccionado */
.ui-datepicker .ui-state-active
{
background: orange;
color: #FFFFFF;
}
</style>
</head>
<body>
<p>Fecha: <input type="text" id="datepicker"></p>
</body>
</html>
No hay comentarios:
Publicar un comentario