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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How can I use DateTime picker in QueryBuilder?

Thread ID:

Created:

Updated:

Platform:

Replies:

148009 Oct 1,2019 08:57 PM UTC Oct 3,2019 05:17 AM UTC Angular - EJ 2 3
loading
Tags: Query Builder
Drio
Asked On October 1, 2019 08:57 PM UTC

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 [Syncfusion]
Replied On 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 


Drio
Replied On October 2, 2019 04:21 PM UTC

Great !!

Thank you Sangeetha.

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon