Trying to add a new plugin for only one filter but it is applied for all the filters seems.

[shrabanee]

Hi

I want to show a custom calendar for filter of type 'date', on clicking on the input field provided (same way as it is being done in the widget demo by using bootstrap-datepicker). For that I have created a new plugin in my code. The code is as given below

      // Adding new plugin 'showCalender'

       $.fn.queryBuilder.define('showCalender', function(opt)
       {
           this.on("click", this.showCal);
       });

       /**
        * Adding new function to show calender on click
        */
       $.fn.queryBuilder.extend({
           showCal : function(element)
           {
               if($(element.target).attr("class") === "form-control" && $(element.target).attr("type") === "text" )
               {
                   //Do stuff here to show the calender
               }
           }
       }); builder.queryBuilder({
           sortable: true,
           plugins:
           {
               'showCalender': true // 
           },
           filters:
           [       
               {
                   id: 'ona',
                   label: 'Org Name',
                   type: 'string'
               },
               {
                   id : 'ca',
                   label : 'Created at',
                   type : 'date' //I want to initialize for this filter
               }
           ]
       });

When I am clicking on input field for id: 'ona' filter, then also it is showing the calender.
I have tried "plugin : showCalender" but it did not work and throws some error. I guess the error is because plugin is not jQuery plugin.
So Is there any way to initialize the plugin 'showCalender' for only 2nd filter?

[mistic100]

(edited your message with valid markdown for code blocks)

So you found the problem: you need a jQuery plugin, not a QueryBuilder plugin.

It's as simple as :

$.fn.showCalender = function(options) {
    // Do stuff here to show the calender
    // "this" is your element, the rule input
    // "options" is the filter's "plugin_options"

    return this;
};

Do not forget to do this.trigger('change') after changing the input value, otherwise the builder will not refresh it's model.

[shrabanee]

Where I need to use this function, so that it will only work for the filter where I want to show it not for all the elements?

[mistic100]

Exactly like you already tried :

I have tried "plugin : showCalender" but it did not work and throws some error. I guess the error is because plugin is not jQuery plugin.

but as a string like the doc says plugin: 'showCalender'

[shrabanee]

Tried by doing

filters : [{ id : 'ca', label : 'Created at', type : 'date', plugin : "showCalender" }]

Getting the error "Uncaught ConfigError: Unable to find plugin "showCalender" ". Same Error as I was getting initially.

[mistic100]

Perhaps the plugin needs to be declared before using it.

I can only speculate as you refuse to post your complete code.

[shrabanee]

Giving the code below

var builder = $("#builder");
$.fn.showCalender = function(options) 
 {
     //Code to show calendar
     return this;
 }; 
 builder.queryBuilder({
     sortable: true
     filters:
     [       
         {
             id: 'ona',
             label: 'Org Name',
             type: 'string'
         },
         {
             id : 'ca',
             label : 'Created at',
             type : 'date' ,
            plugin : "showCalender"
         }
     ]
 });

[mistic100]

(Triple back quotes must be on a new line for correct code block, edited your message again)

Besides the fact you are missing a comma after sortable: true, it perfectly works.

[shrabanee]

That I missed while removing some extra code here.

Still getting the same error in browser. Can you give some working example of this implementation? Any link or fiddle code, which I can refer.

[mistic100]

What about the other way arround ? You provide the fiddle and I tell you what's wrong. That's how Open Source support works.

You can already refer to the source code of the three demos on the website.

[shrabanee]

Okay let me create the fiddle and will give the link here.

Three demos I have already referred. I could not see any custom plugin use over there.

[shrabanee]

I made some mistake for which that error was coming. Working properly now.
Thanks for the help. 👍

[mistic100]

That's why I always insist for setup a example of the problem. 50% of the time it helps to find the problem by yourself.

[shrabanee]

Okay. Thanks again @mistic100