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

【问题标题】：Issue with JQuery Date Picker in Modal Window模态窗口中的 JQuery 日期选择器问题
【发布时间】：2012-01-21 16:50:12
【问题描述】：

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

    $(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; }

任何可以帮助我解决此问题的人将不胜感激。

提前致谢！！

问候，哈兰德

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-dialog jquery-ui-datepicker

【解决方案1】：

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

或者先禁用日期选择器，然后使用对话框的open事件来启用它。当对话框关闭时禁用。

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

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

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

【讨论】：

嗨二极管，你提到的代码，虽然它在 jsfiddle 中运行良好，但在我的中不起作用。我很困惑为什么它没有，尽管我有相同版本的 datepicker 和 js 版本。另一方面，我尝试了 showON 'button' ，它就像我想要的那样工作！非常感谢！
我知道这是旧的，但您的第二个解决方案（我不想要一个按钮，所以第一个不是一个选项）不能正常工作。你能帮我吗？谢谢。

【解决方案2】：

最后一行中的“show”怎么样？

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

【讨论】：