可以使用jQuery UI Datepicker进行编辑

Question

我需要在页面上单击编辑元素,然后调用jQuery UI Datepicker的实例.

目前,我正在使用JEditable提供就地编辑,这工作正常.但是,我有一个日期控制输入,我希望它显示为日历,这是乐趣开始的地方.

我在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类是日期选择器,我的Jeditable类是ajaxedit,我确定上面的不作为是由于需要在代码中以某种方式引用它们,但我不知道如何.此外,Jeditable控件是许多元素id中的一个,如果它有一个方位.

那些知识更多的想法？

Answer 1

我看了上面提到的源代码,但它看起来有点儿麻烦.我认为它可能是为旧版本的datepicker设计的,而不是jQuery UI datepicker.我对代码进行了一些修改,并且通过更改,它至少在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'
});

Answer 2

该jeditable,日期选择器插件似乎做的正是你需要的.

它在Jeditable中启用了jQuery UI Datepicker.这是演示.

Answer 3

这是我的解决方案.我使用自定义日期格式,并在datepicker关闭,我重置输入表单并应用cssdecoration(我的jeditable改进).使用jQuery UI 1.5.2

$.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({
        firstDay: 1,
        dateFormat: 'dd/mm/yy',
        closeText: 'X',
        onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); },
        onClose: function(dateText) {
            original.reset.apply(form, [settings, original]);
            $(original).addClass( settings.cssdecoration );
            },
    });
}});

Answer 4

我有同样的问题。在http://www.appelsiini.net/projects/jeditable/custom.html的源代码中搜索让我找到了解决方案。

有一个“jquery.jeditable.datepicker.js”。将其放入我的代码中，添加了一个新函数“datepicker”（也在源代码中）。

我不知道你的脚本是如何工作的，但就我而言，该函数还需要：

id : '元素id',

名称：'编辑'

将数据存储在数据库中。

:)

达贝尔尤赫