Gary Gary - 1 month ago 14
Javascript Question

How do I bind a JQuery UI Datepicker to a text field in a CKEditor dialog?

I'm trying to bind a JQuery ui Datepicker to a text field in a CKEditor dialog box. The error I'm getting says jQuery(...)datepicker(); is not an object. Which to me says that JQuery ui is not being loaded... ?

The intention is simply to get a datepicker bound to txtDlgReportDate.
I can see that JQuery is being loaded when required but alert(jQuery.ui) returns 'undefined'.

My code is... (Creates a button for a CKEditor toolbar)

Thanks

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

And... the issue is that CKEditor doesn't just add an input tag but it surrounds it with a div and a table so the datepicker is added 'inline' to a div... To get it working in a 'click to show' type way we need to get the id of the input tag that's buried in the CK HTML and apply the .datepicker() function to it.

A working version (although it needs a bit more finessing) is....

    {
        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
            });

        },