Customize / options to date-picker in QueryBuilder?

[Kasper]

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. :)

[Vinoth Kumar Sundara Moorthy]

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' }, 

]; 

 

Sample Link: https://stackblitz.com/edit/react-rzx63v-dkvtr9?file=index.js 

 

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 

[Kasper]

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.

From what I can see from this example: https://ej2.syncfusion.com/react/demos/#/material/query-builder/template

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?

[Vinoth Kumar Sundara Moorthy]

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, 

 

https://stackblitz.com/edit/react-8g6uwu-7mafkw?file=index.js 

 

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