删除输入属性后，Jquery 日期选择器不起作用答案

【问题标题】：Jquery date picker don't work after remove input attribute删除输入属性后，Jquery 日期选择器不起作用
【发布时间】：2014-07-07 08:49:53
【问题描述】：

这是我的Jsfiddle code，我有一个带有日期选择器的输入文本；当此输入为只读时，我不显示弹出日历。我单击按钮的位置删除只读属性，但弹出日历不再显示。怎么了？

HTML：

<input type="text" name="data_contratto" id="data_contratto" class="form-control                         datamask datamask datapick" value="01/06/2013" readonly>
<button class="btneditlog btn btn-default" type="button" data-edit="daticontratto"><span class="fa fa-edit"></span></button>

JS：

$('.datapick' ).datepicker({ 
        dateFormat: "dd/mm/yy",
        beforeShow: function (input, inst) {
         if ($(input).prop("readonly")) {
                 inst.dpDiv = $('<div style="display: none;"></div>');
              }    
        }});

$('.btneditlog').click(function(e){
   $('#data_contratto').removeAttr("readonly"); 
    });

感谢高级版。马可。

【问题讨论】：

点击按钮时是否要显示日期选择器？

标签： jquery jquery-ui date datepicker twitter-bootstrap-3

【解决方案1】：

如果我理解正确，如果输入实际上是只读的，则返回 false 可以轻松解决：

$('.datapick' ).datepicker({ 
    dateFormat: "dd/mm/yy",
    beforeShow: function (input, inst) {
     if ($(input).prop("readonly")) {
            return false;
          }    
}});

更新小提琴http://jsfiddle.net/79jFB/1/

【讨论】：

【解决方案2】：

问题出在

inst.dpDiv = $('<div style="display: none;"></div>');

它隐藏了 datepicker 插件提供的<div>。

解决此问题的方法是，在单击按钮时重新初始化日期选择器。

$('.btneditlog').click(function(e){
    $('#data_contratto').removeAttr("readonly");
    $('.datapick').datepicker('destroy').datepicker()
});

Demo

【讨论】：

【解决方案3】：

我认为问题可能是您正在删除该属性，但实际上并未重置该属性，而这正是您的 beforeShow 正在查看的内容。在按钮上点击尝试：

$('.btneditlog').click(function(e){
    $('#data_contratto').prop("readonly", false); 
});

【讨论】：

虽然看起来你正在重写你的函数中的 inst.dpDiv，所以当它被销毁后被调用时，它将作为你重写的空 div 加载。