How can I use DateTime picker in QueryBuilder?

[Drio]

The QueryBuilder only have date, string and number type fields, but I would like to use DateTimePicker, How can I implement it ?

[Sangeetha Priya Murugan]

Hi Drio, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement “To render the datetimepicker in querybuilder” and it can be achievable by using template property. For your convenience, we have prepared the sample based on your requirement in date option as like in the below code example. 

 

Code Block: 

 

dateTemplate: TemplateColumn = { 

            create: () => { 

                return createElement('input', { attrs: { 'type': 'Date' } }); 

            }, 

            destroy: (args: { elementId: string }) => { 

                let datetime: DateTimePicker = (getComponent(document.getElementById(args.elementId), 'datetimepicker') as DateTimePicker); 

                if (datetime) { 

                    datetime.destroy(); 

                } 

            }, 

            write: (args: { elements: Element, values: Date }) => { 

                let today: Date = new Date(); 

                let currentYear: number = today.getFullYear(); 

                let currentMonth: number = today.getMonth(); 

                let currentDay: number = today.getDate(); 

                let date: Date = new Date(currentYear, currentMonth, 14, 10, 30); 

                let dateTimeInstance: DateTimePicker = new DateTimePicker({ 

                    min: new Date(currentYear, currentMonth, 7, 10, 0, 0), 

                    max: new Date(currentYear, currentMonth, 27, 22, 30, 0), 

                    value: new Date(currentYear, currentMonth, 14, 12, 0, 0) 

                }); 

                dateTimeInstance.appendTo('#' + args.elements.id); 

            } 

        }; 

 

Please find the sample link below. 

 

https://stackblitz.com/edit/angular-klrr98?file=main.ts 

 

For more details, regarding the template feature. Please refer the below link. 

 

https://ej2.syncfusion.com/angular/demos/#/material/query-builder/template 

 

Could you please check the above sample & links and get back to us, if you need any further assistance on this. 

 

Regards, 

Sangeetha M 

[Drio]

Great !!

Thank you Sangeetha.

[Vinoth Kumar Sundara Moorthy]

Hi Drio, 

 

You are most welcome. Please feel free to contact us if you need any further assistance on Syncfusion components. 

 

Regards, 

Vinoth Kumar S