BoldDeskWe are launching BoldDesk on Product Hunt soon. Learn more & follow us.
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.
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
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
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
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.