function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Gopikrishna DasariGopikrishna Dasari 

Related to LWC

I have one date input field and we have some list of records when we enter the date filed. the date is grater than the enter date filed those records only want to show in display list how can we achieve this. In LWC any one can help me in this.
AshwiniAshwini (Salesforce Developers) 
Hi Gopikrishna,
Can you elaborate bit more on the scenario?
Is there any logic which you have tried and facing any issues?

Thanks.
Gopikrishna DasariGopikrishna Dasari
Hi Ashwini,

<template>
    <lightning-input type="date" label="Enter Date" onchange={changeHandler}></lightning-input>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    </div>
</template>


import { LightningElement } from 'lwc';
import generateData from './generateData';
const columns = [
    { label: 'Label', fieldName: 'name' },
    { label: 'Website', fieldName: 'website', type: 'url' },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
    { label: 'Balance', fieldName: 'amount', type: 'currency' },
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
];
export default class BasicDatatable extends LightningElement {
    data = [];
    columns = columns;
    connectedCallback() {
        const data = generateData({ amountOfRecords: 100 });
        this.data = data;
    }
changehandler(){

}
}


Here we have one list of records and one input date field when we enter date in input field we have to check given date field is grater than in list of records date those records only we want to dispiay in list  how can we write logic for this.

Thank you,
gopikrishna.
Arun Kumar 1141Arun Kumar 1141
Hi Gopikrishna,

I have created below lwc component to query records having CreatedDate greater then entered date in input field.

HTML: 
<template>
	<lightning-card title="Account List">
		<lightning-input type="date" variant="standard" label="Filter Data" onchange={filterData}></lightning-input>
		<div class="slds-m-around_medium">
			<template if:true={accounts}>
				<ul class="slds-list_ordered">
					<template for:each={accounts} for:item="account">
						<li key={account.Id}>{account.Name}</li>
					</template>
				</ul>
			</template>
			<template if:false={accounts}>
				<p>No accounts found.</p>
			</template>
		</div>
	</lightning-card>
</template>
JS: 
import { LightningElement, wire, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class queryRecords extends LightningElement {
    accounts;
    @track varDate;
    @wire(getAccounts, {varDate:'$varDate'})
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
        } else if (error) {
            console.error('Error loading accounts', error);
        }
    } 
    filterData(event) {
        this.varDate = event.target.value;
    }
}
Apex class: 
public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts(Date varDate) {
        return [SELECT Id, CreatedDate, Name FROM Account where CreatedDate > :varDate]; 
    }
}

Hope this will be helpful.
Thanks!
AshwiniAshwini (Salesforce Developers) 
Hi Gopi Krishna,
You can try something like below: 
<template>
    <lightning-card title="Filter Records">
        <div class="slds-p-around_medium">
            <lightning-input type="date" label="Enter Date (YYYY-MM-DD)" onchange={filterRecords}></lightning-input>
            <template if:true={errorMessage}>
                <p class="slds-text-color_error">{errorMessage}</p>
            </template>
        </div>
        <div class="slds-p-around_medium">
            <lightning-datatable
                key-field="Id"
                data={filteredData}
                columns={columns}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>
import { LightningElement, wire, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getRecords from '@salesforce/apex/YourController.getRecords';

const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/; // Regular expression for YYYY-MM-DD date format

const columns = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Website', fieldName: 'Website', type: 'url' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' },
    { label: 'Amount', fieldName: 'Amount', type: 'currency' },
    { label: 'CloseAt', fieldName: 'CloseAt', type: 'date' },
];

export default class FilterRecords extends LightningElement {
    @track filteredData = [];
    @track columns = columns;
    @track errorMessage = '';

    filterDate = null;

    @wire(getRecords, { filterDate: '$filterDate' })
    wiredRecords({ error, data }) {
        if (data) {
            this.filteredData = data;
        } else if (error) {
            console.error('Error loading records', error);
            this.showErrorMessage(error.body.message);
        }
    }

    filterRecords(event) {
        const enteredDate = event.target.value;
        
        if (enteredDate.match(DATE_REGEX)) {
            this.errorMessage = ''; // Clear any previous error message
            this.filterDate = enteredDate;
        } else {
            this.showErrorMessage('Invalid date format. Please use YYYY-MM-DD.');
        }
    }

    showErrorMessage(message) {
        this.errorMessage = message;
        const event = new ShowToastEvent({
            title: 'Error',
            message: message,
            variant: 'error'
        });
        this.dispatchEvent(event);
    }
}
  
public with sharing class YourController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getRecords(Date filterDate) {
        return [SELECT Id, Name, Website, Phone, Amount, CloseAt FROM Account WHERE CloseAt >= :filterDate];
    }
}

If this information helps, please mark the answer as best. Thank you
 
Gopikrishna DasariGopikrishna Dasari
Hi Arun Kumar,

Thanks for your answer. 

Thanks,
Gopikrishna.
Gopikrishna DasariGopikrishna Dasari
Hi Ashwini,

Thanks for your answer. 

Thanks,
Gopikrishna.