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

Datepicker with input text mask

Hi,

I attempted to use an text mask with datepicker component, but no success.

I've set an function to created property on datepicker to create a input text mask. The mask appears on the input, but does not work well. When i try to input some date like "02/2019" the text makes it "2/2019" and when it looses focus, it throws an error: 
Cannot read property 'className' of undefined

I tried to use theese two threads, but none of them resolved my problem. Theese two specify some property called focustOut,but i didn't find. 

Can some example with Javascript be provided?

Here is the snippet code

dtPickerInicio = new ej.calendars.DatePicker({
                    value: data.dataInicioEntradas,
                    max: moment().endOf('month')._d,
                    start: 'Year',
                    depth: 'Year',
                    format: 'MM/yyyy',
                    change: function (args) {
                        refreshDateRanges();
                    },
                    enabled: !isEdit,
                    strictMode: true,
                    created: onCreated,
                }, args.form.elements.namedItem('f_datainicio'));

function onCreated() {
        new ej.inputs.MaskedTextBox({ mask: '00/0000', placeholder: '__/____' }).appendTo(this.element);
    }

2 Replies

AB Ashokkumar Balasubramanian Syncfusion Team September 25, 2019 07:20 AM UTC

Hi Adam Mews,

 
Good day to you. 

We have checked with your query for enabling mask for the Date Picker component input control to restrict the date entry based on the format. At present, we are not providing the masking support for the Date Picker component. We have already considered to provide this feature in any of our upcoming releases. We appreciate your patience until then.    
   
You can also track the details regarding this feature with our Feedback portal from the below link.     
   
Ashokkumar B. 



PO Prince Oliver Syncfusion Team July 29, 2021 09:35 AM UTC

Hello Adam, 

Good day to you. 

We are glad announce that we have provided mask support for DatePicker component. Please find the below demo and documentation links below. 

 
Please let us know if you need any further assistance regarding this. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon