Cómo establecer el tamaño y la posición de jquery Fecha selector icono de calendario desencadenar imagen

Question

Estoy usando selector de fecha jquery el icono de calendario disparo de imagen cerca de cuadro de texto está por defecto en la parte superior Quiero establecer el tamaño de la imagen (altura) igual que cuadro de texto altura por favor, dame algunas sugerencias mi código es

$(#textbox1).datepicker({ 
    showOn: "button", 
    buttonImage: "calendar_1.png", 
    buttonImageOnly: true 
)}; 

Answer 1

Inspeccionar el elemento con firebug, tengo esto:

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/> 

A continuación, puede trabajar con esa clase CSS ui-datepicker-trigger.

Answer 2

Añadir CSS personalizado en su página

<style> 
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px } 
/* {} is the value according to your need */ 
</style> 

Answer 3

Si está utilizando su propia imagen personalizada para el icono del calendario, puede simplemente crear la imagen del tamaño que desea. Para mi caso, la altura de mi cuadro de entrada era 24px y el tamaño del icono era 16X16. Acabo de editar el tamaño de la imagen y la hice 24X24 y el problema fue resuelto.

Answer 4

Nada de esto funcionó para mí. Parece que jQuery establece la propiedad de altura del botón de imagen al salir de la función de listo. Por lo tanto, si intenta establecer la propiedad height en la función ready, se sobreescribirá a 26px. Así que creé una función separada para ejecutar en el evento onload de la etiqueta body. Se actualiza la propiedad altura del botón para lo que quiero de esta manera:

// sample jQuery datepicker button tag: <img style="margin: 0px; padding: 2px; height: 26px; vertical-align: bottom;" class="ui-datepicker-trigger" > 
var oDateCell = oTableRow.cells[2]; 
var sDateCellHTML = oDateCell.innerHTML; 
var sRevisedHTML = sDateCellHTML.replace("height: 26px;", "height: 13px;"); 
oDateCell.innerHTML = sRevisedHTML; 

he hecho un poco más de trabajo en esto y descubrí que el código anterior tiene un error. Hace que el evento de clic falle y el calendario no se muestra al hacer clic en la imagen. No sé por qué, pero encontré una mejor manera de hacerlo funcionar. El método anterior era una manera torpe (¿vaga?) De cambiar el estilo. La forma correcta es la siguiente:

  var oTableRow = oTable.rows[iRow]; 
      if (oTableRow.cells.length > 2) 
      { 
       var oDateCell = oTableRow.cells[2]; 
       if (oDateCell.childNodes.length > 1) 
       { 
        var oImage = oDateCell.childNodes[1]; 
        oImage.style.height = "13px"; 
       } 
      } 

Answer 5

Es posible editar la clase .ui-selector de fechas-gatillo con jQuery, pero es importante para que la edición después de selector de fechas función.

Ejemplo:

$(#textbox1).datepicker({ 
     showOn: "button", 
     buttonImage: "calendar_1.png", 
     buttonImageOnly: true)}; 

$(".ui-datepicker-trigger").css("margin-bottom","-6px"); 

Answer 6

Aplicar este CSS:

.ui-datepicker-trigger { 
    position: absolute; 
}