fonteva-design-guide/force-app/main/default/lwc/pfmInputDateRange/pfmInputDateRange.js

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import BASE from '@salesforce/resourceUrl/PFM_Base';

import { fireEvent } from 'c/actionutils';

export default class PfmInputDateRange extends LightningElement {
    @api fromName; // name attribute for `from` input
    @api fromValue; // value from wired list
    @api fromReadOnly; // boolean for `from` input
    @api fromTabIndex; // tab-index for `from` input
    @api fromHelpText; // help text for `from` input
    @api toName; // name attribute for `to` input
    @api toValue; // value from wired list
    @api toReadOnly; // boolean for `to` input
    @api toTabIndex; // tab-index for `to` input
    @api toHelpText; // help text for `to` input
    @api required; // boolean
    @api formatOptions;
    @api errorMessageFromBeforeTo = 'From Date must be before To Date.';

    @api label; // input parent label
    @api cancelLabel = 'Cancel'; // cancel button label
    @api applyLabel = 'Apply'; // apply button label
    @api toLabel = 'To'; // label from `to` input
    @api fromLabel = 'From'; // label from `from` input

    @api backend; // boolean
    @track backendLabelClass;

    @track fromOutput; // displayed value in tile for `from`
    @track toOutput; // displayed value in tile for `to`
    @track classes;
    @track showError = false;

    newFromDate;
    newToDate;
    privateVal = {};
    internalVal;

    @api set val(newVal) {
        this.internalVal = newVal;
        this.update(newVal);
    }

    get val() {
        return this.internalVal;
    }

    connectedCallback() {
        this.loadDependentStyles();
        const classBase = 'pfm-input_date-range';
        const valBackend = this.backend;
        let backend;

        backend = valBackend ? '' : ' pfm-input_portal';
        this.classes = classBase + backend;
        this.update(this.val);
    }
    renderedCallback() {
        if (this.backend) {
            this.backendLabelClass = 'pfm-text_backend';
        }
    }

    @api
    close() {
        this.showError = false;
        this.template.querySelector('.pfm-input_date-range-popover').classList.remove('js-popover');
        this.template.querySelector('c-pfm-button[data-name="applyState"]').endLoader();
    }

    @api
    update(dateVal) {
        if (dateVal) {
            this.privateVal[this.fromValue] = dateVal[this.fromValue];
            this.privateVal[this.toValue] = dateVal[this.toValue];
            this.updateInputDates();
        }
    }

    @api
    saveHandler() {
        const fromInputVal = this.template.querySelector('c-pfm-input[data-name="' + this.fromName + '"]'),
              toInputVal = this.template.querySelector('c-pfm-input[data-name="' + this.toName + '"]');

        if (fromInputVal.localValue > toInputVal.localValue) {
            this.showError = true;
            this.template.querySelector('c-pfm-button[data-name="applyState"]').endLoader();
            return;
        }

        this.privateVal[this.fromValue] = fromInputVal.localValue;
        this.privateVal[this.toValue] = toInputVal.localValue;

        fireEvent(this, 'save', {
            fromDate: this.privateVal[this.fromValue],
            toDate: this.privateVal[this.toValue]
        });
        this.updateDisplayRange();
    }

    updateDisplayRange() {
        if (this.privateVal) {
            this.fromOutput = this.privateVal[this.fromValue];
            this.toOutput = this.privateVal[this.toValue];
        }
    }

    openPopover() {
        let popovers = document.querySelectorAll('.pfm-input_date-range-popover');
        popovers.forEach(function (p) {
            if (p.classList.contains('js-popover')) {
                p.classList.remove('js-popover');
            }
        });
        this.template.querySelector('.pfm-input_date-range-popover').classList.add('js-popover');
        this.newFromDate = this.privateVal[this.fromValue];
        this.newToDate = this.privateVal[this.toValue];
    }

    updateInputDates() {
        const inputDateFieldsFound = this.template.querySelectorAll('div.pfm-input_date-range-popover c-pfm-row c-pfm-column').length > 1;
        // const fromDateComp = this.template.querySelector('c-pfm-input[data-name="' + this.fromName + '"]');
        const fromDateComp = inputDateFieldsFound && this.template.querySelectorAll('div.pfm-input_date-range-popover c-pfm-row c-pfm-column c-pfm-input')[0];
        if (fromDateComp) {
            fromDateComp.updateValue(this.privateVal[this.fromValue]);
        }
        // const toDateComp = this.template.querySelector('c-pfm-input[data-name="' + this.toName + '"]');
        const toDateComp = inputDateFieldsFound && this.template.querySelectorAll('div.pfm-input_date-range-popover c-pfm-row c-pfm-column c-pfm-input')[1];
        if (toDateComp) {
            toDateComp.updateValue(this.privateVal[this.toValue]);
        }
        this.updateDisplayRange();
    }

    cancelPopover() {
        this.updateInputDates();
        this.close();
    }

    loadDependentStyles() {
        if (!window.pfmDateRangeStylesLoaded) {
            loadStyle(this, BASE + '/css/component/input/date-range.css');
            window.pfmDateRangeStylesLoaded = true;
        }
    }
}