Question

在模式对话框中使用 Datepicker ，请不要使用Firefox 19.0.2中的更改月/年下拉列表：

http://jsfiddle.net/469zV/2/

的 HTML

<div id="dialog-form" title="test" style="display:none">
  <form>
     <fieldset>
        <p>Date1: <input type="text" id="datepicker"/></p>  
     </fieldset>
  </form>
</div>

SCRIPT

$( "#dialog-form" ).dialog({
    modal: true
});

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true
});

搜索后，很多人可以找到有关此问题的一些信息，但没有关于解决方案的信息：

http://bugs.jqueryui.com/ticket/8989#no1

任何想法如何解决这个问题......先谢谢。

Answer 1

这可能不是您想要的，但如果您删除文本输入，它将为您提供月份和年份选择。

<强> Working Example

$( "#dialog-form" ).dialog({  
    modal:true,
    height:340,
    width:340
});

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,

});

<div id="dialog-form" title="test" style="display:none"> 
    <form>
    <fieldset> 
        <div id="datepicker"/></div>  
    </fieldset>
    </form>
</div>

Answer 2

选择日期后，您需要模糊文本框，以便重新触发焦点事件：

$( "#dialog-form" ).dialog({
    modal: true
});

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true    
}).on('change',function(){
                 $(this).blur()
               });

Answer 3

这为我解决了这个问题：（文档）$ .unbind（ '的focusIn'）;

Answer 4

这可能导致使用ui和bootstrap.js。在body标签中添加的类modal-open具有overflow-y:hiiden的属性。您需要省略该属性，并且datepicker年份更改将起作用

Answer 5

Jquery Ui Datepicker month/year dropdown is not working in popup in latest firefox

将此代码添加到您的javascript脚本或文件中。

    var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
    $.fn.modal.Constructor.prototype.enforceFocus = function() {};
    $confModal.on('hidden', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
    });
    $confModal.modal({ backdrop : false });

Answer 6

尝试一下：

beforeShow: function(el, dp) {
    uidp = $('#ui-datepicker-div').addClass('forced-display-none').detach();
    $(el).parent().append(uidp);
    setTimeout(function(){$(uidp).css({'position':'relative','left':'0px','top':'0px'}).removeClass('forced-display-none')},200);
}

或者如果您希望使用固定位置：

beforeShow: function(el, dp) {
    c = $(el).closest("div.modal-dialog");
    if ($(c).length) {
        l = $(el).offset().left - $(c).offset().left;
        t = $(el).offset().top - $(c).offset().top; //$(el).height();
        uidp = $('#ui-datepicker-div').addClass('forced-display-none').detach();
        $(el).parent().append(uidp);
        setTimeout(function(){$(uidp).css({'position':'fixed','left':l+'px','top':t+'px'}).removeClass('forced-display-none')},150);
    }
}

将“强制显示无”定义为：

.forced-display-none {display: none !important;}

JQuery UI - 无法在模态对话框中更改datepicker中的月/年

6 个答案: