I am trying to implement datePicker
in LWC and referencing https://developer.salesforce.com/blogs/2019/08/convert-a-javascript-datepicker-to-a-lightning-web-component.html
I have stored moment.js
in static resource and I have copy pasted from https://momentjs.com/downloads/moment.min.js and version is Moment.js 2.29.1
When I add below datePickerApp
in page, it shows below image and throws error from function loadActivities
from js file
[moment is not a function]
datePickerApp.html
<template>
<c-date-picker></c-date-picker>
</template>
datePicker.js
import { LightningElement, api, track } from 'lwc';
import moment from '@salesforce/resourceUrl/moment';
import { loadScript } from 'lightning/platformResourceLoader';
export default class DatePicker extends LightningElement {
lastClass;
@track dateContext
@track selectedDate
@track dates = [];
today
connectedCallback(){
Promise.all([
loadScript(this, moment + '/moment.js')
]).then(() => {
this.loadActivities();
});
}
loadActivities(){
this.today = moment();
this.dateContext = moment();
this.selectedDate = moment();
}
}
datePicker.html
<template>
<div class="dates">
<div class="buttonContainer">
<button class="link" type="button" onclick={goToday}>
Today
</button>
<p>{formattedSelectedDate}</p>
<p class="bold">{year}</p>
</div>
<div class="buttonContainer">
<button class="prev" type="button" onclick={previousMonth}>
Prev
</button>
<span class="bold">{month}</span>
<button class="next" type="button" onclick={nextMonth}>
Next
</button>
</div>
<ul class="header">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="datePickerHolder">
<template for:each={dates} for:item="date">
<li
key={date.formatted}
class={date.className}
data-date={date.formatted}
onclick={setSelected}
>
{date.text}
</li>
</template>
</ul>
</div>
</template>