jquery - 可使用 jQuery UI Datepicker 进行 Jeditable

Question

我需要单击来编辑页面上的元素，这将依次调用 jQuery UI Datepicker 的实例。

目前，我使用 JEditable 提供就地编辑，效果很好。但是，我有一个日期控制输入，我希望将其显示为日历，这就是乐趣的开始。

我在这个 blog 中找到了一条评论作者:Calle Kabo(不幸的是，该页面有点困惑)，详细介绍了执行此操作的方法:

$.editable.addInputType("datepicker", {
        element:  function(settings, original) {
            var input = $("<input type=\"text\" name=\"value\" />");
            $(this).append(input);
            return(input);
        },
        plugin:  function(settings, original) {
            var form = this;
            $("input", this).filter(":text").datepicker({
                onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }
            });
        }
    });

但是，我无法使上述工作正常 - 没有错误，但也没有效果。我尝试过将其放置在 jQuery 文档就绪函数中，也尝试将其放置在其外部 - 没有什么乐趣。

我的 UI Datepicker 类是 date-picker，我的 Jeditable 类是 ajaxedit，我确信上述不作为是由于需要在代码中以某种方式引用它们，但我不知道如何。另外，Jeditable 控件是众多元素 id 之一(如果它有方向的话)。

更了解情况的人有什么想法吗？

Answer 1

我看了一下上面提到的源代码，但似乎有点错误。我认为它可能是为旧版本的日期选择器设计的，而不是 jQuery UI 日期选择器。我对代码做了一些修改，经过更改，它至少可以在 Firefox 3、Safari 4、Opera 9.5 和 IE6+ 中运行。仍然可能需要在其他浏览器中进行更多测试。

这是我使用的代码(保存在名为jquery.jeditable.datepicker.js的文件中)

$.editable.addInputType('datepicker', {
    element : function(settings, original) {
        var input = $('<input>');
        if (settings.width  != 'none') { input.width(settings.width);  }
        if (settings.height != 'none') { input.height(settings.height); }
        input.attr('autocomplete','off');
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
        /* Workaround for missing parentNode in IE */
        var form = this;
        settings.onblur = 'ignore';
        $(this).find('input').datepicker().bind('click', function() {
            $(this).datepicker('show');
            return false;
        }).bind('dateSelected', function(e, selectedDate, $td) {
            $(form).submit();
        });
    }
});

示例实现代码:

$(".datepicker-initiative").editable('inc/ajax/saveInitiative.php', {
     type: 'datepicker',
     tooltip: 'Double-click to edit...',
     event: 'dblclick',
     submit: 'OK',
     cancel: 'Cancel',
     width: '100px'
});