代码之家 › 专栏 › 技术社区 › BrynJ

jquery用户界面日期选择器可编辑

jeditable datepicker calendar forms jquery

9

BrynJ · 技术社区 · 15 年前

我需要在页面上单击以编辑元素,这将反过来调用jquery ui-datepicker的实例。

目前,我正在使用Jeditable提供就地编辑,这很好。但是,我有一个日期控制输入,我希望它显示为一个日历,这就是乐趣的开始。

我发现了一条评论 blog 由CalleKabo(不幸的是页面有点混乱)详细介绍了一种方法:

$.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 document ready函数中,也放在它之外——没有乐趣。

我的UI日期选取器类是日期选取器,我的可编辑类是Ajaxedit,我确信上面的不活动是因为需要在代码中以某种方式引用它们,但我不知道如何操作。此外,如果有方向的话,jeditable控件是许多元素ID中的一个。

有更多知情人士的想法吗?

5 回复 | 直到 12 年前

1

4

dabbeljuh 15 年前

我也有同样的问题。在的源代码内搜索 http://www.appelsiini.net/projects/jeditable/custom.html 带我去解决问题。

有一个“jquery.jeditable.datepicker.js”。在我的代码中添加了一个新的函数“datepicker”(也在源代码中)。

我不知道您的脚本如何工作,但在我的情况下,函数还需要:

id:'elementid',

姓名:“编辑”

将数据存储在数据库中。

Hth:)

达贝尔朱

2

14

Kirsehn 15 年前

我看了一下上面提到的源代码,但它似乎有点问题。我认为它可能是为较旧版本的datepicker而设计的,而不是jquery ui datepicker。我对代码做了一些修改,经过修改,它至少可以在火狐3、Safari4、Opera9.5和IE6+上运行。可能还需要在其他浏览器中进行更多的测试。

这是我使用的代码(保存在一个名为 jquery.jeditable.datepicker.js查询.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'
});

3

13

qertoip 13 年前

这个 jeditable-datepicker 插件似乎完全满足您的需要。

它在jeditable中启用jquery ui日期选择器。这里是 demo .

4

5

m_ax 15 年前

这是我的解决方案。我使用自定义日期格式,在日期选择器关闭时,我重置输入表单并应用CSSDecoration(我的可编辑改进)。使用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 );
            },
    });
}});

5

1

Roberto Carrasco 15 年前

这是我的解决方案,但不是完整的可编辑输入类型。

$.editable.addInputType('date', {
    element : function(settings, original) {
        var input = $('<input type="text" readonly="readonly" name="value" size="10 />');
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
        var form = this;
        settings.onblur = 'cancel';
        $(this).find('input').datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); },
            onClose: function(dateText) { $(this).hide(); $(form).trigger("submit");}
        });            
    },
    submit  : function(settings, original) { },
    reset   : function(settings, original) { }
});