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

How can I use DateTime picker in QueryBuilder?

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

3 Replies

SP Sangeetha Priya Murugan Syncfusion Team October 2, 2019 06:44 AM UTC

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. 
 
 
For more details, regarding the template feature. Please refer the below link. 
 
 
Could you please check the above sample & links and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M 



DR Drio October 2, 2019 04:21 PM UTC

Great !!

Thank you Sangeetha.


VK Vinoth Kumar Sundara Moorthy Syncfusion Team October 3, 2019 05:17 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon