martes, 29 de octubre de 2013

Jquery ui - Cambiar propiedades CSS del campo de fecha - datepicker



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>