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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filter by date with mask

Thread ID:





144481 May 8,2019 11:59 AM UTC May 14,2019 01:42 PM UTC Angular - EJ 2 3
Tags: Grid
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

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: 

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. 

<div class="control-section"> 
    <ejs-grid #grid [dataSource]='data' allowPaging='true' (actionBegin)="begin($event)" allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings'> 
            <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> 


this.filter = { 
            ui: { 
                create: (args: { target: Element, column: object }) => { 
                    const flValInput: HTMLElement = createElement('input', { className: 'flm-input' }); 
                    this.maskInput = new MaskedTextBox({ 
                    mask: '[0-3][0-9]/[0-1][0-9]/[0-3][0-9][0-9][0-9]', 
                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])); 


Please get back to us if you need further assistance. 

Thavasianand S. 

Fabiano Melo
Replied On May 10, 2019 11:38 AM UTC


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 [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:  
Thavasianand S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon