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

我想绑定一个JQuery UI日期选择器到CKEditor对话框中的文本字段。我得到的错误说jQuery（...）datepicker（）;不是一个对象。对我来说，哪个JQuery UI没有被加载......？如何将JQuery UI Datepicker绑定到CKEditor对话框中的文本字段？

目的很简单，就是让datepicker绑定到txtDlgReportDate。我可以看到JQuery在需要时被加载，但alert（jQuery.ui）返回'undefined'。

我的代码是...（创建一个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

来源

2016-11-04 Gary

而且......问题是，CKEditor的不只是增加一个输入标签，但它用一个div和一个表格包围它，这样datepicker就被'inline'添加到一个div中...为了让它在'click to show'类型的方式下工作，我们需要获取埋入CK中的输入标签的id HTML并将.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 
      }); 

     },

来源

2016-11-04 18:38:42 Gary

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

回答

相关问题