We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customize / options to date-picker in QueryBuilder?

Hi there

Isn't it possible to somehow pass options to the used components within the Query Builder? I'm specifically thinking about the formatting of the input in the Date Picker?

But generally, it would be nice to know if it's possible to either configure each used component within the QB, or if it's just use-as-is. :)



3 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team April 26, 2019 07:17 AM UTC

Hi Kasper, 
 
Thank you for contacting Syncfusion Support. 
 
We have checked your requirement “To Format DatePicker input in QueryBuilder” and it is achievable by using format property in QueryBuilder columns as like in the below code snippet. 
 
[index.js] 
this.columnData = [ 
    //.. 
    { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' }, 
    { field: 'Date', label: 'Date', type: 'date', format: 'dd-MMM-yy' }, 
]; 
 
 
Could you please check the above sample and get back to us if we misunderstood your requirement or you need further assistance on this? 
 
Regards, 
Vinoth Kumar S 



KA Kasper April 29, 2019 11:56 AM UTC

Hi there!

Thank you for the answer - that helped me getting the date formatted correctly.

Now I'm stuck at my next question: The ability to customize the components used by the query builder.

The swapped in component needs to be "newable" with a "new CustomDatePicker(...)" syntax, for it to work.

I have a collection of Material-UI React components, which have their own render methods and so on, so how would I go about using a component like that in this template syntax?


VK Vinoth Kumar Sundara Moorthy Syncfusion Team May 3, 2019 09:20 AM UTC

Hi Kasper, 
 
Good day to you. 
 
We have checked your reported requirement “To render the material react components in QueryBuilder” and it can be achievable by using the template property in EJ2 QueryBuilder. For your convenience, we have prepared the sample to render the material react component (e.g. DatePicker) using template in QueryBuilder and the same can be found in below link, 
 
 
Could you please check the above sample and get back to us, if we misunderstood your requirement or you need further assistance on this? 
 
Regards, 
Vinoth Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon