jQuery jeditable 尝试使用 datetimepicker 时无法读取未定义的属性“插件”答案

【问题标题】：jQuery jeditable Cannot read property 'plugin' of undefined when Trying to use datetimepickerjQuery jeditable 尝试使用 datetimepicker 时无法读取未定义的属性“插件”
【发布时间】：2013-10-01 03:56:52
【问题描述】：

我继承了一段代码，它最初只需要一个可编辑的日期，这是使用 jquery datatables、jquery-editable 和 datepicker 实现的。

这是仅日期的当前工作代码

$('.editdate')
    .editable(function (value, settings) {
    if ((value == null) || (value == '')) {
        return ($(this)
            .parent()
            .find('label')
            .text());
    }
    hasBeenEdited(this);
    return (value);
}, {
    type: 'datepicker',
    datepicker: {
        dateFormat: 'mm-dd-yy',
        changeMonth: true,
        changeYear: true
    }
});

现在我被要求在日期中包含时间（服务器端的数据库和模型已更改为时间戳），我正在尝试合并 datetimepicker 插件。

当我使用 $(".editdatetime").datetimepicker() 在可编辑之外执行此操作时，它按预期工作，但是当我尝试使用可编辑函数执行此操作时，我收到以下错误

firefox: TypeError: $.editable.types[settings.type] is undefined

chrome: Uncaught TypeError: Cannot read property 'plugin' of undefined

这是我为datetimepicker编辑的

$('.editdatetime')
    .editable(function (value, settings) {
    if ((value == null) || (value == '')) {
        return ($(this)
            .parent()
            .find('label')
            .text());
    }
    hasBeenEdited(this);
    return (value);
}, {
    type: 'datetimepicker',
    datetimepicker: {
        dateFormat: 'mm-dd-yy',
        changeMonth: true,
        changeYear: true,
        showHour: true,
        showMinute: true
    }
});

非常感谢任何指导或帮助

【问题讨论】：

标签： jquery jquery-ui datepicker datetimepicker jeditable

【解决方案1】：

所以我终于意识到我需要将输入类型datetimepicker 添加到可编辑。所以我设法使用以下方法解决了这个问题：

$.editable.addInputType( 'datetimepicker', {

    /* create input element */
element: function (settings, original) {
    var form = $(this),
        input = $('<input />');
    input.attr('autocomplete', 'off');
    form.append(input);
    return input;
},

/* attach jquery.ui.datetimepicker to the input element */
plugin: function (settings, original) {
    var form = this,
        input = form.find("input");

    // Don't cancel inline editing onblur to allow clicking datetimepicker
    settings.onblur = 'nothing';

    datetimepicker = {
        onSelect: function () {
            // clicking specific day in the calendar should
            // submit the form and close the input field
            form.submit();
        },

        onClose: function () {
            setTimeout(function () {
                if (!input.is(':focus')) {
                    // input has NO focus after 150ms which means
                    // calendar was closed due to click outside of it
                    // so let's close the input field without saving
                    original.reset(form);
                } else {
                    // input still HAS focus after 150ms which means
                    // calendar was closed due to Enter in the input field
                    // so lets submit the form and close the input field
                    form.submit();
                }

                // the delay is necessary; calendar must be already
                // closed for the above :focus checking to work properly;
                // without a delay the form is submitted in all scenarios, which is wrong
            }, 150);
        }
    };

    if (settings.datetimepicker) {
        jQuery.extend(datetimepicker, settings.datetimepicker);
    }

    input.datetimepicker(datetimepicker);
}
});

【讨论】：