Añadir la imagen jquery del calendario a datepicker

Question

No estoy seguro de cómo agregar la clase ui-icon ui-icon-calendar como una imagen de fechador junto al campo de texto. Quiero algo como esto: http://jqueryui.com/demos/datepicker/#icon-trigger, pero debería tener la imagen del calendario de jquery.

Answer 1

<script> 
     $(function() { 
      $("#datepicker").datepicker({ 
       showOn: "button", 
       buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
       buttonImageOnly: true 
      }); 
     }); 
</script> 

Answer 2

Si hace clic en el botón Ver código fuente a continuación el ejemplo se ha vinculado a, verá algo como esto:

$('#field').datepicker({   
    buttonImage: '/images/calendar_icon.png' 
}); 

Answer 3

por esto podemos borrar la fecha dada desde el campo, aunque el campo es de solo lectura. Debe ser de solo lectura, para que el usuario no la dé a elegir de datepicker.

html:

$("#datepickerID").datepicker({   
    showOn: "button", 
    buttonImage: "images/calendar.png", 
    buttonImageOnly: true, 
    buttonText: "Select date", 
    minDate : 0, 
    showButtonPanel: true, 
    closeText: 'Clear', 
    onClose: function() { 
     var event = arguments.callee.caller.caller.arguments[0]; 
     // If "Clear" gets clicked, then really clear it 
     if ($(event.delegateTarget).hasClass('ui-datepicker-close')) { 
      $(this).val(''); 
     } 
    } 
});