Как сделать изображение кнопки выбора даты пользовательского интерфейса jQuery доступным только для чтения

Когда я делаю свой datepicker только для чтения, я вижу, что пользователь не может ничего вводить в текстовое поле. Однако они по-прежнему могут изменить значение с помощью значка календаря. Как скрыть значок календаря, чтобы пользователи не могли изменить значение даты?

Я не хочу отключать средство выбора даты, так как мне нужно, чтобы значение было отправлено на сервер при отправке формы.

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

javascript php jquery jquery-ui jquery-ui-datepicker
person user3359065    schedule 08.04.2014    source источник
comment
Ваш заголовок в вопросе звучит по-другому. В вашем вопросе вы хотите, чтобы весь календарь был скрыт, а в заголовке вы хотите, чтобы только изображение было доступно только для чтения? Что именно вы хотите?   -  person Dhaval Marthak    schedule 08.04.2014
comment
нет, я хочу, чтобы текстовое поле и img были доступны только для чтения   -  person user3359065    schedule 08.04.2014
comment
Какова цель значка календаря?   -  person Salman A    schedule 08.04.2014

Ответы (2)


arrow_upward
2
arrow_downward

Нет такого способа сделать это, но вы можете пройти через следующие аспекты:

Вы можете установить допустимый диапазон для некоторого недопустимого диапазона, чтобы пользователь не мог выбрать любую дату:

$(".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-скрипт

person Dhaval Marthak    schedule 08.04.2014

arrow_upward
1
arrow_downward

Просто уничтожьте средство выбора даты, когда вы измените ввод на только для чтения:

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

Демонстрация №1

Кроме того, вы можете скрыть триггер изображения:

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

Демонстрация #2

Для триггера кнопки вы можете просто отключить его:

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

Демонстрация #3

person Salman A    schedule 08.04.2014