3

在模态对话框中使用Datepicker，不要在 Firefox 19.0.2 中使用Change Month/Year下拉菜单，请参阅：

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>

脚本

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

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

经过大量搜索可以找到有关此问题的一些信息，但没有关于解决方案的信息：

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

我该如何解决这个问题？

4

6 回答 6

2

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

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

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true    
}).on('change',function(){
                 $(this).blur()
               });
于 2013-05-28T17:57:52.593 回答
1

这可能不是您要查找的内容，但如果您放弃文本输入，它将返回您选择的月份和年份。

工作示例

$( "#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>
于 2013-05-28T17:55:30.673 回答
0

这为我修复了它： $(document).unbind('focusin');

于 2015-10-28T20:53:45.443 回答
0

Jquery Ui Datepicker 月/年下拉菜单在最新的 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 });
于 2018-04-25T13:52:06.063 回答
0

尝试这个：

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;}
于 2019-11-29T20:42:19.400 回答
0

这可能是因为同时使用 ui 和 bootstrap.js。在 body 标记中添加的类modal-open具有overflow-y:hiiden. 您需要省略该属性，日期选择器年份更改将起作用

于 2018-01-18T12:01:00.653 回答