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
close icon

Filter by date with mask

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

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team 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. 

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])); 

                } 
            } 
         }; 


Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 



FM Fabiano Melo 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.


TS Thavasianand Sankaranarayanan Syncfusion Team 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:  
 
regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon