DateTimePicker in queryBuider return null initially

[MaazMohammed]

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);

                    }

                }

            },

[Arunkumar Devendiran]

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: 

https://stackblitz.com/edit/mj2wjz?file=index.ts 

 

Video Link: 

https://www.syncfusion.com/downloads/support/forum/151540/ze/video1500802698 

 

Please let us know, if you have any concerns. 

 

Regards, 

Arunkumar D 

[MaazMohammed]

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

[Sangeetha Priya Murugan]

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.  

 

https://www.syncfusion.com/feedback/12144/validation-not-working-properly-for-datetimepicker-which-is-rendered-in-template 

 

Regards, 

Sangeetha M