使用 jQuery UI Datepicker 可编辑

Posted 2023-05-09

【中文标题】使用 jQuery UI Datepicker 可编辑

【英文标题】：Jeditable with jQuery UI Datepicker

【发布时间】：2010-10-13 03:08:21

【问题描述】：

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

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

我在 Calle Kabo 的 blog 中找到了一条评论（不幸的是，该页面有点混乱），其中详细说明了执行此操作的方法：

$.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 之一，如果有影响的话。

知道更多的人有什么想法吗？

【参考方案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'
);

【讨论】：

如果您在日期选择器中需要时间，也可以使用此datetimepicker extension（只需将“日期选择器”替换为“日期时间选择器”即可）。

【参考方案2】：

jeditable-datepicker 插件似乎可以满足您的需求。

它在 Jeditable 中启用 jQuery UI Datepicker。这是demo。

【参考方案3】：

这是我的解决方案。我使用自定义日期格式并在 datepicker 关闭时重置输入表单并应用 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 );
            ,
    );
);

【讨论】：

这实际上是我发现的唯一一个对我有用的。谢谢！

@Rashack 我知道我来晚了，但是日期选择器是否为您覆盖了“确定”和“取消”按钮？另外，您如何获得留在表中的日期？

【参考方案4】：

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

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

我不知道您的脚本是如何工作的，但在我的情况下，该功能还需要：

id : 'elementid',

名称：“编辑”

将数据存储在数据库中。

第 :)

dabbeljuh

【参考方案5】：

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

$.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)  
);