如何將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對話框中的文本字段？

回答

相關問題