How to make jQuery ui datepicker button image read-only

Question

When I make my datepicker readonly I see that the user cannot type anything into the text box. However, they can still change the value using the calendar Icon. How can I hide the calendar icon so that users cannot change the date value?

I do not want to disable the datepicker since I need the value posted to the server upon form submit.

$(function () {
    $(".datepicker").datepicker({
        showOn: "button",
        buttonImage: "../calendar/images/calendar.gif",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        onClose: function () {
            $(this).focus();
        }
    });
});    

Answer 1

There is no such a way to do the stuff but you can go through the following aspects:

You can set the range allowed to some invalid range so the user can't select any date:

$(".datepicker").datepicker({
      minDate: -1,  // Add this one further
      maxDate: -2,   // Add this one further
      showOn: "button",
      buttonImage: "../calendar/images/calendar.gif",
      buttonImageOnly: true,
      changeMonth: true,
      changeYear: true,
      onClose: function () {
          $(this).focus();
      }
}).attr('readonly', 'readonly');

JS Fiddle

Answer 2

Just destroy the datepicker when you change the input to readonly:

$(".datepicker").datepicker("destroy").prop("readonly", true);

Demo #1

Alternately, you can hide the image trigger:

$(".datepicker").prop("readonly", true).next("img").hide();

Demo #2

For button trigger you can simply disable it:

$(".datepicker").prop("readonly", true).next("button").prop("disabled", true);

Demo #3