[SalesForce] LWC lightning-input type=”date” setting value and changing value dynamically with modified date

I'm able to change and show the modified value of date on a lightning-input type="date" LWC component . My JS code will calculate and show the first date of the month for any date selection of the month using date picker. Perfect. When I change the date again using the date picker FOR THE SAME MONTH, it will not show the first date as value. But using date picker if I pick another month and date it will show the first month, which is good. But again for this month also if I repeat and change date using date picker it will show the selected date only, even though on console.log I can see the value of {startDtToFirstOfMonth} as the first month always. Very strange. Any clues?

<pre>
lightning-input value={startDtToFirstOfMonth} type="date" name="stDt" label="Enter a date" 
onchange={handleStDateCahngeEvent} 
</pre>
<pre>
/lightning-input    
</pre>

@track startDt;
    @track startDtToFirstOfMonth;

    handleStDateCahngeEvent(event){
      this.startDt = event.target.value;
      this.startDtToFirstOfMonth = this.getFirstDateOfMonth(this.startDt) ; 
    }

    getFirstDateOfMonth(dt){
        const regex = /(\-\d\d)$/;          
        var givenDateConvertedToFirst = dt.replace(regex,'-01');          
        return givenDateConvertedToFirst ;
    }

Best Answer

You can change the target value to behave in this way by doing following

handleStDateCahngeEvent(event){
this.startDt = event.target.value;
var firstdate=this.getFirstDateOfMonth(this.startDt);
event.target.value=firstdate;
this.startDtToFirstOfMonth=firstdate;

}

Though i dont know how it changed the first time and then didn;t worked just for the same month.

Related Solutions

[SalesForce] Track Input value in LWC

You can use a single handler to capture the values in all of your inputs.

Here is my favorite approach that has 0 maintenance once you put it in, all you need to know is what "Field" and what "Value" and you can pump an object full of this information, just like a map with key and value.

Uncommented Solution:

@track theRecord = {};

handleFormInputChange(event){
    this.theRecord[event.target.name] = event.target.value;
}

<lightning-input type="time" name="FirstName" label="First Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

This uses an object and bracket notation to assign the data to the correct object property.

I've used this many times to keep changes easy, adding fields to HTML and logic to JS without having to touch the handler.

Commented Solution:

// define your object, it'll look just like an sobject in the end
@track theRecord = {};

handleFormInputChange(event){
    // In 1 line, assign the value to the property
    this.theRecord[event.target.name] = event.target.value;
    console.log(event.target.name + ' now is set to ' + event.target.value);
}


// example: 
      // event.target.name == 'FirstName'
      // event.target.value == 'Mike'
      
      // End result: 
        // this.theRecord.FirstName = 'Mike';
        // Dynamically created a new property for theRecord... it'll look like this:
        // this.theRecord = {FirstName: 'Mike'};

    // see the full structure of our object as it grows
    // console.log('theRecord: ' + JSON.stringify(this.theRecord, null, '\t'));


html: 

<div>See output like {theRecord.FirstName} {theRecord.MiddleName} {theRecord.LastName}</div>

<lightning-input type="time" name="FirstName" label="First Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="MiddleName" label="Middle Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="LastName" label="Last Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

[SalesForce] lwc convert date from text to lightning-input of type date

Dates are displayed by default in a medium-length style, such asJan 7, 2019in the en-US locale.

To specify a short style such as1/7/2019, set date-style="short".

To specify a long style such asJanuary 7, 2019 set date-style="long".

If a user enters a date using a different style, the component accepts the input and reformats it to the specified date-style during the blur event. The date entered must be valid for the user's Salesforce locale, and match one of the short, medium, or long styles.

  <lightning:input name="input1" label="Enter a date" type="date" dateStyle="short" />  
        <lightning:input name="input2" label="Enter a date" type="date" dateStyle="medium" />  
        <lightning:input name="input3" label="Enter a date" type="date" dateStyle="long" />

Best Answer

Related Solutions

[SalesForce] Track Input value in LWC

[SalesForce] lwc convert date from text to lightning-input of type date

Related Topic