0

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

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" />  

enter image description here

| improve this answer | |

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.