Filter by date with mask

[Fabiano Melo]

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

[Thavasianand Sankaranarayanan]

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 

<div class="control-section"> 

    <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. 

[Fabiano Melo]

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.

[Thavasianand Sankaranarayanan]

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.