Modificar propiedades css datepicker button

Modificar propiedades css datepicker button

Al crear un datepicker tiene la opción de agregar un botón de apoyo

 $( "#fecha" ).datepicker({
       nextText: "Siguiente",
       prevText: "Anterior",
       showWeek: false,
       showOn: "both",
       buttonText: "Calendar",
       buttonImage: "imagen/icono.png"
 });


El ícono aparece con fondo de un botón, que toma el tamaño original de la imagen; para personalizarlo debemos modificar su css.

Usando el inspector del navegador vemos que la clase es .ui-datepicker-trigger

entonces, el icono del botón lo modificamos con :

/*icono de button*/
.ui-datepicker-trigger{
  border: 0px;
  width:40px;
  height:40px;
}

y la imagen contenida:

/*icono de button image*/
.ui-datepicker-trigger>img{
  width:35px;
  height:35px;
}

así tendremos un botón más acorde a lo que deseamos.

Saludos y éxito en sus proyectos.