function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4 

Data Masking in Lightning Component

Hello, 

I need set a mask on my lightning input text, to get de Data Format. (YYYY-MM-DD)
Can anyone could help me?

 
Rohit Kumar SainiRohit Kumar Saini
Hi,

It seems it can't be done using lighting:input tag but it can be done using ui:input tag. 

<ui:inputDate aura:id="EndDateField" value="" displayDatePicker="true" format="yyyy-mm-dd"/>

Thanks.
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4
Hi, Rohit ! Thanks for the help, but I need the data be automatically formatted.
When i do this, i just see the format that i need use.
 
Rohit Kumar SainiRohit Kumar Saini
Hi,

This will work when data needs to be saved in a date field later. For example:

<ui:inputDate aura:id="DOBFIeld" value="{!v.contactObj.Birthdate}" displayDatePicker="true" format="yyyy-MM-dd"/>

Here Birthdate is a date field on contact. Initially, it will show a date picker and when I select any date in date picker, it shows the date in given format. The data in the system will be saved as date and will be shown to the user based on its locale etc on the page layout.

I understand that you are trying to save this date in a text field and not on a date field. Even if I change the value attribute to a text field, it is working fine for me. For example:

<ui:inputDate aura:id="DOBFIeld" value="{!v.contactObj.AssistantName}" displayDatePicker="true" format="yyyy-MM-dd"/>
                  
This is showing date picker to me, showing date in given format and when I save the values, AssistantName which is a text field is showing date in given format.

if you don't want to use datePicker here, and set displayDatePicker="false", the system will show the format as a placeholder but doesn't enforce the user to put values only in the given format. You will have to write custom logic in the JS controller for this ( which will be like grabbing the value, parse the string and put dashes in between). As the user can put any values in it, it's not a good idea to set displayDatePicker to false for date fields.

Thanks.