Integrating DateTimePicker in React QueryBuilder.

Integrating a DateTimePicker component within a QueryBuilder in React applications can enhance the user experience by providing a convenient way to select dates and times in React QueryBuilder. This article will guide you through the process of adding a DateTimePicker to a QueryBuilder component as a template using Syncfusion’s ej2-react-calendars and ej2-react-querybuilder packages.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js and npm
• React and ReactDOM
• Syncfusion ej2-react-calendars and ej2-react-querybuilder packages

Step-by-Step Integration

Create the DateTemplate Component

The purpose of the DateTemplate component is to provide a rendering of the DateTimePicker component, which will then be utilized as a template within the Query Builder component.

import * as React from 'react';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { getComponent, Internationalization } from '@syncfusion/ej2-base';

export function DateTemplate(props) {
    let qryBldrObj;
    let state = Object.assign({}, props);
    qryBldrObj = getComponent(document.getElementById('querybuilder'), 'query-builder');
    const args = state;

    function dateChange(event) {
        const args = state;
        let intl = new Internationalization();
        let format = { type: 'dateTime', skeleton: 'short' };
        let elem = document.getElementById(args.ruleID).querySelector('.e-rule-value');
        const value = event.value ? intl.formatDate(event.value, format): null;
        qryBldrObj.notifyChange(value, elem, 'value');
    }
    return (<div>
        <DateTimePickerComponent placeholder = "Select DateTime" value={args.rule.value} change={dateChange}/>
        </div>);
}

Create Query Builder component to render the Syncfusion Query builder

Import the required components and methods that are necessary for rendering the Syncfusion Query Builder component.

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-querybuilder';
import { DateTemplate } from './date-template'
import { Internationalization } from '@syncfusion/ej2-base';

Define the dateTemplate Function

Create a function that will return the DateTemplate component with the passed props:

function dateTemplate(props) {
    return <DateTemplate {...props} />;
}

Handle the actionBegin Event

Define the actionBegin function to initialize the value template with the correct date format:

function actionBegin(args) {
    let intl = new Internationalization();
    let format = { type: 'dateTime', skeleton: 'short' };
    if (args.requestType === 'value-template-initialize') {
        args.rule.value = args.rule.value ? intl.parseDate(args.rule.value, format) : null;
    }
}
`

Set up the QueryBuilder Component

Configure the QueryBuilderComponent with the necessary columns and templates:

import './index.css';
import * as React from 'react';
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-querybuilder';
import { DateTemplate } from './date-template'
import { Internationalization } from '@syncfusion/ej2-base';

function QueryBuilder() {
    let format = { type: 'dateTime', skeleton: 'short' };
    let importRules = {
        condition: 'and',
        rules: [{ label: 'Date', field: 'Date', operator: 'equal', type: 'date', value: '6/5/18, 12:30 PM' }]
    };

    return (
        <div className='control-pane'>
            <div className='control-section'>
                <div className='col-lg-12 control-section'>
                    <QueryBuilderComponent rule={importRules} id="querybuilder" actionBegin={actionBegin}>
                        <ColumnsDirective>
                            <ColumnDirective field="Category" label="Category" type="string"/>
                            <ColumnDirective field="PaymentMode" label="PaymentMode" type="string"/>
                            <ColumnDirective field="TransactionType" label="TransactionType" type="string"/>
                            <ColumnDirective field="Description" label="Description" type="string"/>
                            <ColumnDirective field="Date" label="Date" type="string" template={dateTemplate} format= {format}/>
                            <ColumnDirective field="Amount" label="Amount" type="string"/>
                        </ColumnsDirective>
                    </QueryBuilderComponent>
                </div>
            </div>
        </div>
    );
}
export default QueryBuilder;
const root = createRoot(document.getElementById('sample'));
root.render(<QueryBuilder />);
root.render(<QueryBuilder />);

Conclusion

By following these steps, you can successfully integrate a DateTimePicker component within a QueryBuilder in your React application. This integration allows users to select date and time values easily when building complex queries.

Sample Link

Refer to the working sample for additional details and implementation: React QueryBuilder with DateTimePicker - StackBlitz

Additional References

• Syncfusion DateTimePicker Component: Syncfusion DateTimePicker
• Syncfusion QueryBuilder Component: Syncfusion QueryBuilder
• React Documentation: React Official Documentation
• ReactDOM Documentation: ReactDOM Official Documentation

Conclusion

We hope you enjoyed learning about integrating DateTimePicker in React QueryBuilder.

You can refer to our React QueryBuilder feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our React QueryBuilder example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!