Mfcttrf

Why should someone be willing to write a strong recommendation even if that means losing a undergraduate from their lab?

Unbiased estimator of exponential of measure of a set?

What happened after the end of the Truman Show?

Use of vor in this sentence

Can a Beast Master ranger choose a swarm as an animal companion?

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

How can I pack my food so it doesn't smell?

How to dismiss intrusive questions from a colleague with whom I don't work?

What fuel is J005311 burning?

What can I do to keep a threaded bolt from falling out of it’s slot

My two team members in a remote location don't get along with each other; how can I improve working relations?

What is the latest version of SQL Server native client that is compatible with Sql Server 2008 r2

What animal has fat with the highest energy density?

How do slats reduce stall speed?

E: Sub-process /usr/bin/dpkg returned an error code (1) - but how do I find the meaningful error messages in APT's output?

Is a butterfly one or two animals?

Would it be illegal for Facebook to actively promote a political agenda?

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

Interaction between Ethereal Absolution versus Edgar Markov with Captivating Vampire

Are required indicators necessary for radio buttons?

In xXx, is Xander Cage's 10th vehicle a specific reference to another franchise?

Derivation of D-dimensional Laplacian in spherical coordinates

Is it safe to reuse the password when using AES-CTR with scrypt?

Nuclear decay triggers

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 7 hours ago

alok jha

asked 8 hours ago

alok jhaalok jha

1644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  WHat have you tried so far?
  
  – Pranay Jaiswal
  8 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 7 hours ago

alok jha

asked 8 hours ago

alok jhaalok jha

1644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  WHat have you tried so far?
  
  – Pranay Jaiswal
  8 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 7 hours ago

alok jha

asked 8 hours ago

alok jhaalok jha

1644 bronze badges

share|improve this question

edited 7 hours ago

alok jha

asked 8 hours ago

alok jhaalok jha

1644 bronze badges

share|improve this question

edited 7 hours ago

alok jha

asked 8 hours ago

alok jhaalok jha

1644 bronze badges

asked 8 hours ago

alok jhaalok jha

1644 bronze badges

asked 8 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 7 hours ago

answered 8 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
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you mean by "not working" ?
  
  – Oleh Berehovskyi
  6 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 7 hours ago

answered 8 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
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for sharing this link.
  
  – Dhanik Lal Sahni
  7 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 7 hours ago

answered 8 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
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you mean by "not working" ?
  
  – Oleh Berehovskyi
  6 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 7 hours ago

answered 8 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
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you mean by "not working" ?
  
  – Oleh Berehovskyi
  6 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 7 hours ago

answered 8 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 7 hours ago

answered 8 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

answered 8 hours ago

Oleh BerehovskyiOleh Berehovskyi

92744 silver badges1616 bronze badges

answered 8 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 7 hours ago

answered 8 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
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for sharing this link.
  
  – Dhanik Lal Sahni
  7 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 7 hours ago

answered 8 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
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for sharing this link.
  
  – Dhanik Lal Sahni
  7 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 7 hours ago

answered 8 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 7 hours ago

answered 8 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges

answered 8 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges

answered 8 hours ago

Dhanik Lal SahniDhanik Lal Sahni

1,03922 gold badges33 silver badges1111 bronze badges