如何使 jQuery ui 日期选取器按钮图像只读 - How to make jQuery ui datepicker button image read-only

How to make jQuery ui datepicker button image read-only

当我将日期选择器设为只读时，我看到用户无法在文本框中键入任何内容。但是，他们仍然可以使用日历图标更改值。如何隐藏日历图标，以便用户无法更改日期值？

我不想禁用日期选择器，因为我需要在提交表单时将值发布到服务器。

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

没有这样的方法来做这些事情，但你可以通过以下几个方面：

您可以将允许的范围设置为某个无效范围，以便用户无法选择任何日期：

$(".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小提琴

只需在将输入更改为只读时销毁日期选择器：

$(".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