3

I would like to show the auto date format like mm/dd/yy...with auto add /. I would like to implement exact same functionality shown in the below example from Fiddle.

Here is the example: Fiddle.

4

You can simply use lightning:input together with its onchange attribute:

<--! yourComponent.cmp -->
<aura:component>
    <lightning:input name="customInput" maxlength="10" onchange="{!c.onCustomInputChange}"/>
</aura:component>

<--! yourComponentController.js -->
({
    onCustomInputChange: function (component, event, helper) {
       helper.validateAndReplace(component, event);
    },
});

<--! yourComponentHelper.js -->
({
    validateAndReplace: function (component, event) {
        const input = event.getSource();
        const inputValue = input.get('v.value');
        const validValue = inputValue.replace(/^(\d\d)(\d)$/g,'$1/$2')
            .replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2')
            .replace(/[^\d\/]/g,'');
        input.set('v.value', validValue);
    },
});
  • Thanks, above one is working. how to show a date-picker with the above working functionality. – alok jha Aug 19 at 17:18
  • Specify the attributes for lightning:input type="date" dateStyle="short" – Oleh Berehovskyi Aug 19 at 17:28
  • I already tried the above mentioned suggestion, then its not working. – alok jha Aug 19 at 17:39
  • What do you mean by "not working" ? – Oleh Berehovskyi Aug 19 at 17:48
  • if i am including type="date" dateStyle="short" then auto add / is not working and the error i am getting is Uncaught Action failed: c:dateFormatAuto$controller$onCustomInputChange [Cannot read property 'replace' of null] – alok jha Aug 20 at 5:23
0

ui:inputDate already has format attribute. You can utilize that one for auto format.

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

Modified:

As ui:inputDate is going to deprecated soon, lightning:input can be used in it's place. Use dateStyle attribute as short to make in format like 1/7/2019.

<lightning:input aura:id="dob" type="date" name="accdob" dateStyle="short" label="Date of Birth" value="{!v.account.DOB__c}" />

Check complete documentation here.

Update 2:

You can implement same code in lightning as well.

component:

<lightning:input type="date" aura:id="Birthdate" dateStyle="short"  name="Birthdate" maxlength="10" onchange="{!c.onChange}"/>

JS Controller:

    onChange : function(component, event, helper) {
    var dob = component.find("Birthdate");
    var dateValue = dob.get('v.value');
    var formattedValue=dateValue.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'');
    dob.set('v.value',formattedValue);
   }
  • 5
    I won't recommend use of ui:inputDate as it would be deprecated soon linkedin.com/pulse/… – Pranay Jaiswal Aug 19 at 17:00
  • Thank you for sharing this link. – Dhanik Lal Sahni Aug 19 at 17:28
  • dateStyle="short" will only work if we select from the date-picker, if we enter it manually in the input field then it will not going to work. @DhanikLalSahni – alok jha Aug 20 at 6:56
  • Check Update 2 for same kind of functionality. – Dhanik Lal Sahni Aug 20 at 10:45
  • it only works when we enter the date manually. it doesn't have the functionality to select from the date picker i want both functionality should work if we enter it manually or either by selecting the date from date-picker. – alok jha Aug 20 at 11:33
0

The desired functionality i was able to achieve through ui:inputdate.

Component

<div class="slds-align_absolute-center slds-page-header__title slds-truncate">
    <lightning:icon iconName="action:new_task" alternativeText="Approved"/>
    <h1 class="slds-m-left_large">AutoSlash</h1>
</div>   

<div class="slds-grid  slds-gutters slds-align_absolute-center">
    <div class="slds-col slds-size_6-of-12">
        <label>OnKeyUp :</label>
        <ui:inputDate aura:id="inputData" value="{!v.DOB}" format="MM/dd/yyyy" displayDatePicker="true" keyup="{!c.onChange}" change="{!c.onChange}" updateOn="keyup,change" />
    </div>
</div>

JSController

({
onChange : function(component, event){
    var seperator = "/";
    var lengthTtl;
    var curntVal;

    curntVal = component.find("inputData").get('v.value');
    lengthTtl = curntVal.length;
    if(lengthTtl == 2 || lengthTtl == 5) {
        curntVal += seperator;
        component.set('v.DOB',curntVal);
    }
    window.addEventListener("keydown", function(e){
        if((e.keyCode >= 65 && e.keyCode <=90) || (e.keyCode >= 106 && e.keyCode <=123) || (e.keyCode >= 186 && e.keyCode <=192) || (e.keyCode >= 219 && e.keyCode <=222)) {
            e.preventDefault();
        }
    }); 
},

})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.