I have a component which is displayed in a custom data table column for a text field having date value. By default text value dueDate along with Edit icon gets displayed. When the edit icon gets pressed, a popup is displayed with lightning-input component of type date along with save and cancel buttons. The need is to display the date in text in MM/DD/YYYY format in lightning-input component of type date properly. when i click edit the value displayed in lightning input is not correct. how can this be formatted correctly. Event the value selected in date picker needs to be formatted properly.
<template>
<div
class="cell slds-grid slds-grid_align-spread slds-grid_vertical-align-center"
onmouseover={handleMouseOver}
onmouseout={handleMouseOuts}
>
<div
class="slds-truncate slds-p-left_x-small"
>
{dueDate}
</div>
<div class="slds-col cell-icon_wrapper slds-p-horizontal_x-small">
<lightning-button-icon
icon-name="utility:edit"
variant="bare"
alternative-text="Edit"
size="small"
class="cell-icon__button_edit slds-hide"
onclick={handleEditClick}
></lightning-button-icon>
</div>
</div>
<template if:true={isPopupOpen}>
<section
class="slds-popover slds-popover slds-popover_edit cell-popover_wrapper"
>
<div
class="slds-grid slds-wrap slds-popover__body cell-popover_body"
>
<template if:true={isLoading}>
<lightning-spinner
alternative-text="Loading"
size="small"
></lightning-spinner>
</template>
<div class="slds-col slds-size_12-of-12 slds-align-top">
<div class="slds-form-element slds-grid slds-wrap">
<lightning-input
value={dueDate}
type="date"
label="Due Date"
variant="label-hidden"
class="slds-grow slds-p-left_small"
date-style="short"
required
placeholder={dateFormat}
></lightning-input>
</div>
</div>
<div class="slds-col slds-size_12-of-12 slds-align-bottom">
<lightning-button
variant="brand"
label="Save"
title="Save"
class="slds-float_right"
onclick={handleSaveClick}
></lightning-button>
<lightning-button
variant="neutral"
label="Cancel"
title="Cancel"
class="slds-float_right slds-p-right_xx-small"
onclick={handleCancelClick}
></lightning-button>
</div>
</div>
</section>
</template>
</template>
import { LightningElement, api, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import updateTask from '@salesforce/apex/TaskListViewsController.updateTask';
const dateTimeFormat = new Intl.DateTimeFormat('en');
export default class TaskListViews_Datatable_Cell_DueDate extends LightningElement {
/** Field Name. */
@api fieldName;
/** Task Id. */
@api taskId;
/** Due Date. */
@api dueDate;
/** Should column be editable. */
@api editable;
@track isPopupOpen = false;
@track isLoading = false;
@track dateFormat = "MM/DD/YYYY";
/** Handles mouseover ovent on the cell. */
handleMouseOver() {
if (this.editable) {
this.wrapperDiv.classList.toggle('cell-wrapper_focus');
this.editIcon.classList.toggle('slds-hide');
}
}
/** Handles mouseout event on the cell. */
handleMouseOuts() {
if (this.editable) {
this.wrapperDiv.classList.toggle('cell-wrapper_focus');
this.editIcon.classList.toggle('slds-hide');
}
}
/** Handles edit click on the cell. */
handleEditClick() {
this.isPopupOpen = true;
}
/** Handles save click. */
handleSaveClick() {
const isInputValid = this.inputComponent.checkValidity();
if (!isInputValid) {
this.inputComponent.reportValidity();
return;
}
const parsedDate = Date.parse(this.inputComponent.value);
// Clien-side check for date validity
if (!parsedDate) {
this.inputComponent.setCustomValidity('Invalid date format');
this.inputComponent.reportValidity();
return;
}
// Format Date Based on User's Locale
this.formattedDate = dateTimeFormat.format(parsedDate);
this.isLoading = true;
updateTask({
taskId: this.taskId,
property: this.fieldName,
value: this.formattedDate
})
.then(() => {
this.showToast();
this.fireCellUpdateEvent();
this.isPopupOpen = false;
})
.catch(error => {
this.inputComponent.setCustomValidity(error.body.message);
this.inputComponent.reportValidity();
})
.finally(() => {
this.isLoading = false;
});
}
/** Creates event to "celludpate". */
fireCellUpdateEvent() {
const event = CustomEvent('cellupdate', {
composed: true,
bubbles: true,
cancelable: true,
detail: {
fieldName: this.fieldName,
id: this.taskId,
newValue: this.formattedDate
},
});
this.dispatchEvent(event);
}
/** Show success toast message. */
showToast() {
const event = new ShowToastEvent({
title: 'Success',
message: `Task's Due Date updated`,
variant: 'success'
});
this.dispatchEvent(event);
}
/** Handles cancel buttton click. */
handleCancelClick() {
this.isPopupOpen = false;
}
/** @returns {LightningElement} Wrapper div. */
get wrapperDiv() {
return this.template.querySelector('.cell');
}
/** @returns {LightningElement} Edit icon. */
get editIcon() {
return this.template.querySelector('.cell-icon__button_edit');
}
/** @returns {LightningElement} Lookup component. */
get inputComponent() {
return this.template.querySelector('lightning-input');
}
}
