+ Start a Discussion
Ramk123Ramk123 

Auto populate slashes in date field or Date format validation

I would like to auto-populate slashes(/) in the date field, am unable achieve with below code.
Example:
Option 1: when user move cursor into date field Slashes(/) should be constant like __/__/____(MM/DD/YYYY)
Option 2: validate user date format: User should enter Date with Slashes and specified format(MM/DD/YYY) else field should throw an error with invalid date format.
Lighting Component
<ui:inputDate aura:id="Birthdate" label="Date Of Birth" 
                                                  value="{!v.value}" 
                                                  displayDatePicker="false" blur="{!c.formatDoB}"
                                                  format="MM/dd/yyyy" />
JS Controller
formatDOB: function(component, helper, event) {
        var DOB = component.find("Birthdate");
        var Date = DoB.get('v.value');
        var s = (""+Date).replace(/\D/g, '');
        var m = s.match(/^(\d{2})(\d{2})(\d{4})$/);
        var formattedDoB = (!m) ? null : + m[1] + "/" + m[2] + "/" + m[3];
        DoB.set('v.value',formattedDoB);
    },

any one please help?
Thanks
Best Answer chosen by Ramk123
Raj VakatiRaj Vakati
Code is here

 
<aura:attribute name="value" type="Date" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:inputDate aura:id="Birthdate" label="Date Of Birth" 
                  value="{!v.value}" 
                  displayDatePicker="false" 
                  format="MM/dd/yyyy" blur="{!c.formatDoB}"/>
 
doInit : function(component, event, helper) {
        var today = new Date();
        component.set('v.value', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
    },
    formatDoB: function(component, helper, event) {
         var dob = new Date(component.find("Birthdate").get("v.value"));
        console.log(dob);
         var formattedDoB = dob.getMonth()+1+ '/' + dob.getDate() + '/' +  dob.getFullYear();
        console.log('formattedDoB'+formattedDoB)
        component.set('v.value',formattedDoB);
        
    },

 

All Answers

Raj VakatiRaj Vakati
Code is here

 
<aura:attribute name="value" type="Date" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:inputDate aura:id="Birthdate" label="Date Of Birth" 
                  value="{!v.value}" 
                  displayDatePicker="false" 
                  format="MM/dd/yyyy" blur="{!c.formatDoB}"/>
 
doInit : function(component, event, helper) {
        var today = new Date();
        component.set('v.value', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
    },
    formatDoB: function(component, helper, event) {
         var dob = new Date(component.find("Birthdate").get("v.value"));
        console.log(dob);
         var formattedDoB = dob.getMonth()+1+ '/' + dob.getDate() + '/' +  dob.getFullYear();
        console.log('formattedDoB'+formattedDoB)
        component.set('v.value',formattedDoB);
        
    },

 
This was selected as the best answer
The AshokAThe AshokA
it's nice solution