Accessing the string value of a date-type lightning-input

Question

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?

Answer 1

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); 
        }
    }