如何将 JQuery UI Datepicker 绑定到 CKEditor 对话框中的文本字段？答案

【问题标题】：How do I bind a JQuery UI Datepicker to a text field in a CKEditor dialog?如何将 JQuery UI Datepicker 绑定到 CKEditor 对话框中的文本字段？
【发布时间】：2016-11-04 04:44:14
【问题描述】：

我正在尝试将 JQuery ui Datepicker 绑定到 CKEditor 对话框中的文本字段。我得到的错误是 jQuery(...)datepicker();不是一个对象。对我来说，JQuery ui 没有被加载...？

目的只是让日期选择器绑定到 txtDlgReportDate。我可以看到 JQuery 在需要时正在加载，但 alert(jQuery.ui) 返回“未定义”。

我的代码是...（为 CKEditor 工具栏创建一个按钮）

谢谢

    b='reportSend';
    CKEDITOR.plugins.add('reportSend',
    {
        init: function (editor) {
            editor.addCommand('sendReportDialog', new CKEDITOR.dialogCommand('sendReportDialog'));

    editor.ui.addButton('reportSend',
    {
        label: 'Send Report',
        command: 'sendReportDialog',
        icon: this.path + 'Email16.png'
    });
    CKEDITOR.dialog.add('sendReportDialog', function (editor) {
        return {
            title: 'Send Report',
            minWidth: 400,
            minHeight: 200,
            contents:
            [
                {
                    id: 'general',
                    label: 'Settings',
                    elements:
                    [
                        {
                            type: 'text',
                            id: 'txtDlgReportDate',
                            label: 'Report Date:',
                            labelLayout: 'horizontal',
                            widths: ['100px', '100px'],
                            onShow: function (data) {

                                if (typeof (jQuery) === 'undefined') {
                                    CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function () {
                                        jQuery.noConflict();
                                    });
                                };

                                if (typeof (jQuery.ui) === 'undefined') {
                                    CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js', function () {
                                        jQuery.noConflict();
                                    });
                                };
                               jQuery(this).datepicker();
                            },
                            commit: function (data) {
                                data.txtDlgReportDate = this.getValue();
                            }
                        },
                        {
                            type: 'select',
                            id: 'reportType',
                            label: 'Report Type',
                            items:
                                [
                                    ['<All>', '-1'],
                                    ['...Types', '1']
                                ],
                            commit: function (data) {
                                data.reportType = this.getValue();
                            }
                        }
                    ]
                }
            ],
            onOk: function () {

                ...send code
                });

            } // End onOk
        }; // end Return
    }); // end dialog Def
} // end init
    });          // End add plugin

【问题讨论】：

标签： javascript jquery jquery-ui datepicker ckeditor

【解决方案1】：

而且...问题是 CKEditor 不只是添加一个输入标签，而是用一个 div 和一个表格围绕它，因此 datepicker 被“内联”添加到一个 div...让它在一个'click to show' 类型的方式我们需要获取隐藏在 CK HTML 中的输入标签的 id 并对其应用 .datepicker() 函数。

一个工作版本（虽然它需要更多的技巧）是....

    {
        type: 'text',
        id: 'txtDlgReportDate',
        label: 'Report Date:',
        onShow: function (data) {

            // Set the width of the outer div (otherwise it's affected by the CK CSS classes and is too wide)
            jQuery('#' + this.domId).css('width', 230);
            // Get the input element
            var theInput = jQuery('#' + this.domId).find('input');
            // Apply the datepicker to the input control
            jQuery(theInput.selector).datepicker({
                showButtonPanel: true
            });

        },

【讨论】：