Xjyuk

Sleeping solo in a double sleeping bag

Is there a known non-euclidean geometry where two concentric circles of different radii can intersect? (as in the novel "The Universe Between")

What animal has fat with the highest energy density?

Multicolumn in table not centered

What professions does medieval village with a population of 100 need?

Why don't sharp and flat root note chords seem to be present in much guitar music?

How to decide whether an eshop is safe or compromised

Do predators tend to have vertical slit pupils versus horizontal for prey animals?

Metal that glows when near pieces of itself

Why doesn't mathematics collapse down, even though humans quite often make mistakes in their proofs?

Did the twin engined Lazair ultralight have a throttle for each engine?

How did Apollo 15's depressurization work?

How does the Saturn V Dynamic Test Stand work?

Chess software to analyze games

How do you call it when two celestial bodies come as close to each other as they will in their current orbits?

How could China have extradited people for political reason under the extradition law it wanted to pass in Hong Kong?

Count the frequency of items in an array

Has there ever been a truly bilingual country prior to the contemporary period?

Designing a prison for a telekinetic race

Why didn’t Doctor Strange stay in the original winning timeline?

Should my "average" PC be able to discern the potential of encountering a gelatinous cube from subtle clues?

Why doesn't the Falcon-9 first stage use three legs to land?

Why do some academic journals requires a separate "summary" paragraph in addition to an abstract?

Does the Symbiotic Entity damage apply to a creature hit by the secondary damage of Green Flame Blade?

How to implement Auto-date functionality in the Lightning JS

How to get the date on date/time record typePassing Date field from Lightning component to Apex controller shows nullforce:inputField auto populating Lookup in Lightning componentHow to implement Chevron on CommunityLightning:input type=“date”: how to change the date fomat - Summer'18how to display component in lightning to all pages like feedback component please see the attachmentStandard lightning date picker has a faulty display

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

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.

lightning community lightninginput

share|improve this question

edited 9 hours ago

alok jha

asked 10 hours ago

alok jhaalok jha

1644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  WHat have you tried so far?
  
  – Pranay Jaiswal
  10 hours ago
  
  

  
  
  
  

add a comment | 

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.

lightning community lightninginput

share|improve this question

edited 9 hours ago

alok jha

asked 10 hours ago

alok jhaalok jha

1644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  WHat have you tried so far?
  
  – Pranay Jaiswal
  10 hours ago
  
  

  
  
  
  

add a comment | 

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.

lightning community lightninginput

share|improve this question

edited 9 hours ago

alok jha

asked 10 hours ago

alok jhaalok jha

1644 bronze badges

share|improve this question

edited 9 hours ago

alok jha

asked 10 hours ago

alok jhaalok jha

1644 bronze badges

share|improve this question

edited 9 hours ago

alok jha

asked 10 hours ago

alok jhaalok jha

1644 bronze badges

asked 10 hours ago

alok jhaalok jha

1644 bronze badges

asked 10 hours ago

alok jhaalok jha

1644 bronze badges

2 Answers
2

active

oldest

votes

3

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(/^(dd)(d)$/g,'$1/$2')
 .replace(/^(dd/dd)(d+)$/g,'$1/$2')
 .replace(/[^d/]/g,'');
 input.set('v.value', validValue);
 ,
);

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, above one is working. how to show a date-picker with the above working functionality.
  
  – alok jha
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Specify the attributes for lightning:input type="date" dateStyle="short"
  
  – Oleh Berehovskyi
  9 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already tried the above mentioned suggestion, then its not working.
  
  – alok jha
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you mean by "not working" ?
  
  – Oleh Berehovskyi
  8 hours ago
  

  
  
  
  

add a comment | 

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.

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  
  I won't recommend use of ui:inputDate as it would be deprecated soon linkedin.com/pulse/…
  
  – Pranay Jaiswal
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for sharing this link.
  
  – Dhanik Lal Sahni
  9 hours ago
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "459"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f274135%2fhow-to-implement-auto-date-functionality-in-the-lightning-js%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

3

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(/^(dd)(d)$/g,'$1/$2')
 .replace(/^(dd/dd)(d+)$/g,'$1/$2')
 .replace(/[^d/]/g,'');
 input.set('v.value', validValue);
 ,
);

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, above one is working. how to show a date-picker with the above working functionality.
  
  – alok jha
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Specify the attributes for lightning:input type="date" dateStyle="short"
  
  – Oleh Berehovskyi
  9 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already tried the above mentioned suggestion, then its not working.
  
  – alok jha
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you mean by "not working" ?
  
  – Oleh Berehovskyi
  8 hours ago
  

  
  
  
  

add a comment | 

3

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(/^(dd)(d)$/g,'$1/$2')
 .replace(/^(dd/dd)(d+)$/g,'$1/$2')
 .replace(/[^d/]/g,'');
 input.set('v.value', validValue);
 ,
);

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, above one is working. how to show a date-picker with the above working functionality.
  
  – alok jha
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Specify the attributes for lightning:input type="date" dateStyle="short"
  
  – Oleh Berehovskyi
  9 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already tried the above mentioned suggestion, then its not working.
  
  – alok jha
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you mean by "not working" ?
  
  – Oleh Berehovskyi
  8 hours ago
  

  
  
  
  

add a comment | 

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(/^(dd)(d)$/g,'$1/$2')
 .replace(/^(dd/dd)(d+)$/g,'$1/$2')
 .replace(/[^d/]/g,'');
 input.set('v.value', validValue);
 ,
);

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

<--! 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(/^(dd)(d)$/g,'$1/$2')
 .replace(/^(dd/dd)(d+)$/g,'$1/$2')
 .replace(/[^d/]/g,'');
 input.set('v.value', validValue);
 ,
);

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

answered 10 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

answered 10 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

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.

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  
  I won't recommend use of ui:inputDate as it would be deprecated soon linkedin.com/pulse/…
  
  – Pranay Jaiswal
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for sharing this link.
  
  – Dhanik Lal Sahni
  9 hours ago
  

  
  
  
  

add a comment | 

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.

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  
  I won't recommend use of ui:inputDate as it would be deprecated soon linkedin.com/pulse/…
  
  – Pranay Jaiswal
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for sharing this link.
  
  – Dhanik Lal Sahni
  9 hours ago
  

  
  
  
  

add a comment | 

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.

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges

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

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

share|improve this answer

edited 9 hours ago

answered 10 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges

answered 10 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges

answered 10 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges