Filter by date with mask

Fabiano Melo

Asked On May 8, 2019 11:59 AM UTC

Good Morning,

I would like to implement the mask in the filter by date of the grid, as shown in the image.
I searched the documentation and also tried to change via DOM and to no avail.
Is there any property or component that can work in conjunction with this GRID filter?

Thank you and I await,

Fabiano Melo

Attachment: masksyncfusion_2aa2315a.zip

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On May 10, 2019 11:20 AM UTC

Hi Fabiano,

Greetings from Syncfusion support.

Yes. You can achieve your requirement by adding custom component in menu filtering. We have already discussed about this in documentation. Please find the documentation link:

Documentation link: https://ej2.syncfusion.com/angular/documentation/grid/filtering/#custom-component-in-filter-menu

We have prepared a sample based on your requirement. In the below code snippet we have rendered a masked textbox for Menu filter. Please find the below code snippet and sample for your reference.

App.component.html

<ejs-grid #grid [dataSource]='data' allowPaging='true' (actionBegin)="begin($event)" allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings'>

<e-columns>

<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>

<e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>

<e-column field='OrderDate' headerText='Order Date' [filter]='filter' width='130' type='date' [format]="formatoptions" textAlign='Right'></e-column>

<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>

<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>

</e-columns>

</ejs-grid>

App.component.ts

this.filter = {

ui: {

create: (args: { target: Element, column: object }) => {

const flValInput: HTMLElement = createElement('input', { className: 'flm-input' });

args.target.appendChild(flValInput);

this.maskInput = new MaskedTextBox({

mask: '[0-3][0-9]/[0-1][0-9]/[0-3][0-9][0-9][0-9]',

});

this.maskInput.appendTo(flValInput);

},

write: (args: {

column: object, target: Element, parent: any,

filteredValue: string

}) => {

this.maskInput.value = args.filteredValue;

},

read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {

let dateParts: any = this.maskInput.element.value.split("/");

args.fltrObj.filterByColumn(args.column.field, args.operator, new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0]));

}

};

Sample: https://stackblitz.com/edit/angular-144481-filtertemplate?file=app.component.ts

Please get back to us if you need further assistance.

Regards,

Thavasianand S.

Reply | Reply with quote

Fabiano Melo

Replied On May 10, 2019 11:38 AM UTC

Hello

Very good! But my question is, would it be possible to have masked in the datepicker according to the image I sent attached the first message? Since my column is of type date, and I want to keep the datepicker, and also give the user the possibility to type the date with the mask.

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On May 14, 2019 01:42 PM UTC

Hi Fabiano,

Currently, the DatePicker component does not support masking of the date input. However, we have already considered this as a feature request and logged in our database to implement it in any of our upcoming releases. Please follow the below feedback link to keep track of the status of this feature.

Feedback portal link:

https://www.syncfusion.com/feedback/1839/provide-mask-support-to-be-applied-in-the-input-of-the-datepicker-component

regards,

Thavasianand S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144481	May 8,2019 11:59 AM UTC	May 14,2019 01:42 PM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US