Question

我使用html，jquery和adobe air构建应用程序。在我的应用程序的一部分，我使用由jquery提供的日期时间选择器。如果我使用浏览器测试它们，它运行良好。但是，当我与Adobe AIR结合使用并使用AIR进行编译时，它无效......

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Icon trigger</title>
    <link rel="stylesheet" href="base/jquery.ui.all.css">
    <script  type="text/javascript" src="js/jquery-1.4.4.js"></script>
    <script  type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script  type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="js/AIRAliases.js"></script>
    <link rel="stylesheet" href="css/demos.css">

    <script language="JavaScript">
        $(document).ready(function(){
            $( "#datepicker" ).datepicker({
                showOn: "button",
                buttonImage: "images/calendar.gif",
                buttonImageOnly: true
            });
        });
    </script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the icon next to the input field to show the datepicker.  Set the datepicker to open on focus (default behavior), on icon click, or both.</p>
</div><!-- End demo-description -->

</body>
</html>

任何人都可以解决它吗？先谢谢

Answer 1

正如jQuery UI开发组中的post所述，其当前形式的jQuery日期选择器在Adobe Air中不起作用。这在Bug #3945中报告。原因是Datepickers为创建的Datepicker界面使用动态创建的onclick事件，Adobe Air中不允许此类操作以及eval()和setTimeout()。在工作中有一个修订版，有些人已经将主要代码分支以尝试修复，这些都记录在上面的链接中。

Answer 2

如AppSol所述，这是jQuery UI和AIR的沙盒问题。然而，解决方法很容易。只需下载未缩小版本的jQuery UI，并在_updateDatepicker（）函数的末尾添加以下内容。在版本1.8.16中，它“在线8954

$(".ui-datepicker-prev").click(function() {
            $.datepicker._curInst.drawMonth--;
            if ($.datepicker._curInst.drawMonth < 0) {
                $.datepicker._curInst.drawMonth = 11;
                $.datepicker._curInst.drawYear--;
            }
            $.datepicker._updateDatepicker($.datepicker._curInst);
        }); 

        $(".ui-datepicker-next").click(function() {
            $.datepicker._curInst.drawMonth++;
            if ($.datepicker._curInst.drawMonth > 11) {
                $.datepicker._curInst.drawMonth = 0;
                $.datepicker._curInst.drawYear++;
            }
            $.datepicker._updateDatepicker($.datepicker._curInst);
        }); 

        $(".ui-datepicker-calendar").find("tr > td").each(function() {
            $(this).click(function() {
                var t = $(this).attr('onclick').split('.')[2].split('(')[1].split(')')[0].split(',');
                $.datepicker._selectDay(t[0].substr(1,t[0].length-2),t[1],t[2],this);
            });
        });

以下是它最终的样子：

/* Generate the date picker content. */
_updateDatepicker: function(inst) {
    var self = this;
    self.maxRows = 4; //Reset the max number of rows being displayed (see #7043)
    var borders = $.datepicker._getBorders(inst.dpDiv);
    instActive = inst; // for delegate hover events
    inst.dpDiv.empty().append(this._generateHTML(inst));
    var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
    if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
        cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
    }
    inst.dpDiv.find('.' + this._dayOverClass + ' a').mouseover();
    var numMonths = this._getNumberOfMonths(inst);
    var cols = numMonths[1];
    var width = 17;
    inst.dpDiv.removeClass('ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4').width('');
    if (cols > 1)
        inst.dpDiv.addClass('ui-datepicker-multi-' + cols).css('width', (width * cols) + 'em');
    inst.dpDiv[(numMonths[0] != 1 || numMonths[1] != 1 ? 'add' : 'remove') +
        'Class']('ui-datepicker-multi');
    inst.dpDiv[(this._get(inst, 'isRTL') ? 'add' : 'remove') +
        'Class']('ui-datepicker-rtl');
    if (inst == $.datepicker._curInst && $.datepicker._datepickerShowing && inst.input &&
            // #6694 - don't focus the input if it's already focused
            // this breaks the change event in IE
            inst.input.is(':visible') && !inst.input.is(':disabled') && inst.input[0] != document.activeElement)
        inst.input.focus();
    // deffered render of the years select (to avoid flashes on Firefox) 
    if( inst.yearshtml ){
        var origyearshtml = inst.yearshtml;
        setTimeout(function(){
            //assure that inst.yearshtml didn't change.
            if( origyearshtml === inst.yearshtml && inst.yearshtml ){
                inst.dpDiv.find('select.ui-datepicker-year:first').replaceWith(inst.yearshtml);
            }
            origyearshtml = inst.yearshtml = null;
        }, 0);
    }
    $(".ui-datepicker-prev").click(function() {
        $.datepicker._curInst.drawMonth--;
        if ($.datepicker._curInst.drawMonth < 0) {
            $.datepicker._curInst.drawMonth = 11;
            $.datepicker._curInst.drawYear--;
        }
        $.datepicker._updateDatepicker($.datepicker._curInst);
    }); 

    $(".ui-datepicker-next").click(function() {
        $.datepicker._curInst.drawMonth++;
        if ($.datepicker._curInst.drawMonth > 11) {
            $.datepicker._curInst.drawMonth = 0;
            $.datepicker._curInst.drawYear++;
        }
        $.datepicker._updateDatepicker($.datepicker._curInst);
    }); 

    $(".ui-datepicker-calendar").find("tr > td").each(function() {
        $(this).click(function() {
            var t = $(this).attr('onclick').split('.')[2].split('(')[1].split(')')[0].split(',');
            $.datepicker._selectDay(t[0].substr(1,t[0].length-2),t[1],t[2],this);
        });
    });

},

这仅在jQuery UI 1.8.16中进行过测试，但是在未来版本中修复此问题的想法仍将保持不变。您需要将click事件处理程序添加到next和prev按钮以及实际日期。

Answer 3

以下是Adobe Air上的datepicker的功能版本：

https://github.com/metaweta/jquery-ui/blob/df77b43f08c593ed5a21323c02cc51b8ada37b02/ui/jquery.ui.datepicker.js

只需使用此文件和jquery.ui.core.js

即可

日期时间选取器未在Adobe AIR中运行

3 个答案: