如何使 jQuery ui datepicker 按钮图像只读答案

【问题标题】：How to make jQuery ui datepicker button image read-only如何使 jQuery ui datepicker 按钮图像只读
【发布时间】：2014-05-21 00:24:22
【问题描述】：

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

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

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

【问题讨论】：

您在问题中的标题听起来不同，在您的问题中您希望隐藏整个日历，而在标题中您只想读取图像？你到底想要什么？
不，我想要文本框和 img 都应该是只读的
那么日历图标的作用是什么？

标签： javascript php jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

Demo #1

或者，您可以隐藏图像触发器：

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

Demo #2

对于按钮触发器，您可以简单地禁用它：

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

Demo #3

【讨论】：