Как связать JQuery UI Datepicker с текстовым полем в диалоговом окне CKEditor?

Question

Я пытаюсь связать JQuery ui Datepicker с текстовым полем в диалоговом окне CKEditor. Ошибка, которую я получаю, говорит jQuery (...) datepicker(); не является объектом. Который мне говорит, что JQuery ui не загружается ...?

Цель состоит в том, чтобы получить привязку 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 

Answer 1

И ... проблема в том, что CKEditor не просто добавить входной тег, но его окружает его с div и таблицей, поэтому datepicker добавляется «inline» в div ... Чтобы заставить его работать в режиме «click to show», нам нужно получить идентификатор входного тега, который был похоронен в CK 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 
      }); 

     },