1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. DateTimePicker in queryBuider return null initially

DateTimePicker in queryBuider return null initially

Hi Team,

I am implementing DateTimePicker in queryBuilder, which lands me into two errors.

1.validation error even value field displays current date. after debugging i found that value field is behaving like 'null'.
2. If i try to change the date validation error tooltip still stays on the page and it never gets destroyed until we refresh the page.

Please help in solving the issue.

below is the code which I am using for the feature.
{ field: 'Date', label: 'Date', type: 'date',
                template: {
                    create: () => {
                        const elem = document.createElement('input');
                        elem.setAttribute('type', 'Date');
                        return elem;
                    },
                    destroy: (args) => {
                        const datetime = getComponent(document.getElementById(args.elementId), 'datetimepicker');
                        if (datetime) {
                            datetime.destroy();
                        }
                    },
                    write: (args) => {
                                 
                        const dateTimeInstance = new DateTimePicker({
                            value: new Date();,
                            format: 'yyyy-MM-dd hh:mm',
                            change: (e) => {
                                console.log(e);
                                qryBldrObj.notifyChange(e.value, e.element);

                            },

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



3 Replies
AD Arunkumar Devendiran Syncfusion Team February 14, 2020 01:55 PM UTC

Hi MaazMohammed, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported issue and we have created the sample for your scenario. In that we have successfully rendered and destroyed the datetimepicker in our querybuilder component. We have checked the rule validation on using validateFields method by clicking the button. We have prepared the video for your reference, in this tooltip working properly while validating the queryBuilder rules in our end. Please refer the below sample and video link. If the issue still persist in your end could you please replicate your issue in the below sample and send back to us, so that we can analyze and provide you a better solution. 
 
Sample link: 
 
Video Link: 
 
Please let us know, if you have any concerns. 
 
Regards, 
Arunkumar D 


MA MaazMohammed February 14, 2020 03:41 PM UTC

Hi Arun,

I have executed your sample but still problems persists in the code. When i created a rule for date default value rendered into value field and then when you hit validate button, the tooltip popups for value field as well. I have attached screenshot of error in stackblitz for you reference.
Thank you

SP Sangeetha Priya Murugan Syncfusion Team February 17, 2020 11:54 AM UTC

Hi MaazMohammed, 
 
Thank you for your update. 
 
We confirmed that the reported issue is a defect and logged the defect report for “Validation not working properly for datetimepicker which is rendered in template”.  And the fix for this issue will be included in upcoming patch release and we appreciate your patience until then. You can track the same through the below feedback link.  
 
 
Regards, 
Sangeetha M  


Loader.
Up arrow icon