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. Image for the cookie policy date

implement dynamic datetime picker in angular query builder

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

3 Replies

YA YuvanShankar Arunagiri Syncfusion Team March 30, 2023 11:00 AM UTC

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.


dateTemplateTemplateColumn = {

        create: () => {

            return createElement('input', { attrs: { 'type': 'Date' } });

        },

        destroy: (args: { elementIdstring }) => {

            let datetimeDateTimePicker = (getComponent(document.getElementById(args.elementId), 'datetimepicker'as DateTimePicker);

            if (datetime) {

                datetime.destroy();

            }

        },

      write: (args: { elementsElementvaluesDate }) => {

        let todayDate = new Date();

     …..

     let dateDate = new Date(currentYearcurrentMonth141030);

            let dateTimeInstanceDateTimePicker = new DateTimePicker({

        min: new Date(currentYearcurrentMonth71000),

        max: new Date(currentYearcurrentMonth2722300),

        value: new Date(currentYearcurrentMonth141200)

    });

    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



SR saikiran Reddy March 30, 2023 01:42 PM UTC

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


YA YuvanShankar Arunagiri Syncfusion Team March 31, 2023 07:33 AM UTC

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 dateTimeInstanceDateTimePicker = new DateTimePicker({

                min: new Date(currentYearcurrentMonth71000),

                max: new Date(currentYearcurrentMonth2722300),

                value: new Date(currentYearcurrentMonth141200),

                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 dateTimeInstanceDateTimePicker = new DateTimePicker({

                min: new Date(currentYearcurrentMonth71000),

…….

                format: 'dd/MM/yyyy',

                change: (eany=> {

                    this.qryBldrObj.notifyChange(e.valuee.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. 


Loader.
Live Chat Icon For mobile
Up arrow icon