implement dynamic datetime picker in angular query builder

[saikiran Reddy]

Hi,

I wanted to implement to datetime picker for date type column with validation. I was unable to do it with

the  solution by  syncfusion Forum team.

  https://stackblitz.com/edit/angular-klrr98file=app.component.ts,app.component.html,app.component.css

I have attached my code snippet for you reference.

Attachment: queryBuildeDateTime_29d7249e.zip

[YuvanShankar Arunagiri]

Hi Saikiran,

Sorry for the delay. We have checked your reported query and for clarification if we use columns property for binding columns to query builder shown as below.

 <ejs-querybuilder id="querybuilder" #querybuilder cssClass="row" [dataSource]="dataSource" [columns]="filter" width="100%"  [rule]="importRules">

Then, we can set the template through JavaScript approach(create, destroy and write) like below code.

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

        }

    };

If we find the tag directive column like in your attached screenshot, then we have create the component within the e-column itself shown as below.

 <ejs-querybuilder #querybuilder class="row" [dataSource]="dataSource">

    <e-columns>

      <e-column field="EmployeeID" label="Employee ID" type="number"></e-column>

      <e-column field="FirstName" label="First Name" type="string"></e-column>

      <e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy">

        <ng-template #template let-data>

          <ejs-datetimepicker (change)="onChange($event)"></ejs-datetimepicker>

      </ng-template>

      </e-column>

    </e-columns>

  </ejs-querybuilder>

Sample link: https://stackblitz.com/edit/angular-29v8kh?file=src%2Fapp.component.html

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

[saikiran Reddy]

HI YuvanShankar A,

Thank you for reply,

I have implemented with above solution provided by you,

But with the above solution, I cannot achieve a change date format and updateRule event not calling whenever I select a date. 0.2 MB

 

[valueModel] = "{datePickerModel: {allowEdit: false,showClearButton:false}}"

I want to achieve allowedit: false and showclearbutton false, Which I did in date-picker.

For you reference I Have attached code snippet and columnModel object

Thank you in advance

Attachment: dateTimePicker_1c05d9d9.zip

[YuvanShankar Arunagiri]

Saikiran,

We have validated your reported query and found as issue in your provided screenshot. If we use the value template for specific column, then valueModel property value not applicable for that template component. We need to set the specific property in template component itself shown as below.

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

                allowEdit: false,

                showClearButton: false,

………

});

Query: I cannot achieve a change date format and updateRule event not calling whenever I select a date?

Kindly refer to the below code snippet to resolve this query. Using the format property of dateTime component, we can change format and when we use value template for specific query builder column, we need to pass the selected value using the notifyChange method of query builder component shown as below.

let dateTimeInstance: DateTimePicker = new DateTimePicker({

                min: new Date(currentYear, currentMonth, 7, 10, 0, 0),

…….

                format: 'dd/MM/yyyy',

                change: (e: any) => {

                    this.qryBldrObj.notifyChange(e.value, e.element, 'value');

                }

            });

 

Sample link: https://stackblitz.com/edit/angular-klrr98-fwypcr?file=app.component.ts

Get back to us if you need any further assistance on this.