readonly属性在文本输入中不起作用

Question

我在inputbox中包含了readonly属性的日期选择器。 但我的datepicker正在工作，但我的文本输入替换为我选择的日期。 我只想显示日历不显示在文本框中。

html
    <input type="text" name="f" id="datepicker" size=18 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="hello">

css
  <script>
  $(function() {
  $( "#datepicker" ).datepicker();
  });
  </script>

Answer 1

Datepicker会覆盖readonly属性。最有效的方法是实现这一目标。

var onShowValue;

$("#datepicker").datepicker({
    beforeShow: function (input, inst) {
        if ($(input).prop("readonly")) {
            inst.dpDiv = $('<div style="display: none;"></div>');
        }
        onShowValue = $(input).val();
    },
    onSelect: function (date) {
        if ($(this).prop("readonly")) {
            $(this).val(onShowValue);
        }
    }
});