Question

我使用代码创建了一个模态窗体/窗口：

    $(function () {
        var widthLen = window.screen.width - 10;
        var heightLen = window.screen.height - 120;
        $("#dialogOperation").dialog({
            width: widthLen,
            height: heightLen,
            closeOnEscape: true,
            modal: true,
            close: function () {
                window.location.href = "OperationMenu.aspx" 
            } 
        });
    });

带有附加日期选择器的文本框和其中的按钮。一切正常，除了一个小问题 - 日期选择器日历总是在每次有回发时显示。每次控制事件后，都会显示日历。

我想要发生的只是当我点击非模态对话框中常见的文本框时才显示日历。

当我尝试使用以下方法隐藏日期选择器时：

    $(document).ready(function () {
        $('#txtDate').datepicker('hide');
    });

我只是无法再显示日历，即使我在文本焦点上调用它：

    $("#txtDate").focus(function () {
        $('#txtDate').datepicker();
    }).blur(function() {
        $('#txtDate').datepicker('hide');
    });

我也尝试将z-index：1003放在jquery css中，但我仍然没有太多运气。

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 1003; }

任何能够帮助我解决此问题的人都将不胜感激。

提前致谢!!

此致哈兰

Answer 1

您可以使用showOn选项 http://docs.jquery.com/UI/Datepicker#option-showOn

或者首先禁用datepicker并使用open对话框启用它。禁用对话框时禁用。

open: function(){
    $('#txtDate').datepicker('enable');

},
close: function() {
    $('#txtDate').datepicker('disable');
}

演示：http://jsfiddle.net/diode/Xawe2/

Answer 2

在最后一行中显示'show'怎么样？

$("#txtDate").focus(function () {
    $('#txtDate').datepicker();
}).blur(function() {
    $('#txtDate').datepicker('show');
});

模态窗口中的JQuery日期选择器问题

2 个答案: