0

We're using the onchange event on text-type lightning-input components to apply formatting, so users can quickly enter numbers and have the punctuation applied automatically.

For instance, a Social Security Number entered as "123456789" becomes "123-45-6789" when the 9th digit is entered, via this onchange function:

handleSSNValueChange(e) {
    let input = e.target.value.replace(/\D/g,''); // Remove non-numeric characters
    if(input.length >= 9) {
        let first = input.substring(0, 3);
        let mid = input.substring(3, 5);
        let last = input.substring(5, 9);
        e.target.value = `${first}-${mid}-${last}`;
    }
}

I'd like to do the same with a date-type lightning-input, so that "01022020" becomes Jan 2, 2020. When I tried, it appeared that that e.target.value doesn't hold the actual string being entered. It apparently gets set on blur, when the typed date has been parsed. I would need a way to access the string value being displayed on the front end in order to do any kind of custom string interpretation.

Any workarounds?

1
  • From the documentation: The date format is automatically validated against the user's Salesforce locale format during the blur event. So it seems that this matches the user's settings in Salesforce. – zaitsman Jan 28 '20 at 23:48
0

I do use keypress event for formatting on the go here is the example .html file

  <template>
       <div class="slds-p-around_medium lgc-bg">
        <span>
            <lightning-input onkeypress={keyCheck} type="text" label="Enter some text"></lightning-input>
            </span>
        </div>
    </template>

.js file

 import { LightningElement, track } from 'lwc';

    export default class App extends LightningElement {
        keyCheck(event){
           let input_v = event.target.value;
         console.log('do your formatting using a track variable : '+input_v); 
        }
    }
1
  • Hi Avjit, that approach works fine when the input type is text. My problem is when you use the date type -- in that case, it looks like event.target.value doesn't return anything until the component successfully parses a date. – Matthew Souther Jan 29 '20 at 16:32

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.